1. Home
  2. Components
  3. Notifications

Alerts

Soft background

For a soft background, use one of the eight contextual classes i.e. .alert-success.

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong>
  You successfully read this important alert message.
</div>

Strong background

For a stronger background color use the .bg-* classes and .text-white.border-0.

<div class="alert bg-info text-white border-0" role="alert">
  <strong>Heads up!</strong>
  This alert needs your attention, but it's not super important.
</div>

Dismissible Alerts

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

<div class="alert alert-dismissible bg-primary text-white border-0 fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Primary - </strong> A simple primary alert - check it out!
</div>