Default Alerts

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual type (e.g., success).

A simple primary alert—check it out! A simple secondary alert—check it out! A simple success alert—check it out! A simple danger alert—check it out! A simple warning alert—check it out! A simple info alert—check it out!

Link color

Use the .alert-link utility class to quickly provide matching colored links within any alert.

A simple primary alert with an example link. Give it a click if you like. A simple secondary alert with an example link. Give it a click if you like. A simple success alert with an example link. Give it a click if you like. A simple danger alert with an example link. Give it a click if you like. A simple warning alert with an example link. Give it a click if you like. A simple info alert with an example link. Give it a click if you like.

Dismissing

Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.

A simple {{color.color}} alert—check it out!