Bootstrap Alert

Bootstrap provides an easy way to create predefined alert messages. Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger:

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Alert Links

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

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>  

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).

 <div class="alert alert-success alert-dismissable">
  <a class="close" data-dismiss="alert">x
  <strong>Success!</strong> Indicates a successful or positive action.
</div>  

Animated Alerts

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

<div class="alert alert-danger fade in">