Basic alert styles

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages. You can also include links by adding the .alert-link class to a tags.

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong>
  You successfully read <a href="#" class="alert-link">this</a> important alert message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong>
  This alert <a href="#" class="alert-link">needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong>
  Better <a href="#" class="alert-link">check yourself</a>, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong>
  Change <a href="#" class="alert-link">a few things</a> up and try submitting again.
</div>

Dismissable Alerts

Build on any alert by adding an optional .alert-dismissible and close button.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>