Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. 


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

Additional content

Alerts can also contain additional .alert-heading and .alert-link for headings and links, plus hr for spacing. 


<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">I'm a header!</h4>
  <p><strong>Well done!</strong> You successfully read this important alert message that <a class="alert-link" href="#">includes a link</a>.</p>
  <hr>
  <p>You can use extra spacing using hr and paragraphs.</p>
</div>

Dismissing alerts

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

On the dismiss button, add the data-dismiss="alert" attribute. 


<div class="alert alert-info alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
  <strong>Close me!</strong> you can click the close button whenever you're ready.
</div>