Alerts

Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger:

Success! Indicates a successful or positive action.
Success! Indicates a successful or positive action.
Info! Indicates a neutral informative change or action.
Warning! Indicates a warning that might need attention.
Danger! Indicates a dangerous or potentially negative action.
Danger! Indicates a dangerous or potentially negative action.

Alert Links

Add the alert-link class to any links inside the alert box to create "matching colored links":

Success! You should read this message.
Success! You should read this message.
Success! You should read this message.
Success! You should read this message.
Success! You should read this message.
Success! You should read this message.

Closing Alerts

To close the alert message, add a .alert-dismissable class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

× Success! Indicates a successful or positive action.
× Success! Indicates a successful or positive action.
× Success! Indicates a successful or positive action.
× Success! Indicates a successful or positive action.
× Success! Indicates a successful or positive action.

Animated Alerts

The .fade and .in classes adds a fading effect when closing the alert message:

× Success! Indicates a successful or positive action.
× Success! Indicates a successful or positive action.
× Success! Indicates a successful or positive action.
× Success! Indicates a successful or positive action.
× Success! Indicates a successful or positive action.