Alerts

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

Bootstrap Alerts documentation

Default style

Use .alert-* classes.

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>
<div class="alert alert-navy" role="alert">
  This is a navy alert—check it out!
</div>
Copy

Link color

Use the .alert-link utility class to quickly provide matching colored links within any alert.

<div class="alert alert-primary" role="alert">
  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Copy

With Icon 

<div class="alert alert-primary media" role="alert">
  <i class="fas fa-info-circle mt-1 mr-1"></i>
  <div class="media-body" role="alert">
    This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
Copy

Dismissing

Use .alert-dismissible class for .alert.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <svg aria-hidden="true" class="mb-0" width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
      <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
    </svg>
  </button>
</div>
Copy

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p class="text-inherit">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr />
  <p class="text-inherit mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
Copy

Soft style

Use .alert-soft-* classes.

<div class="alert alert-soft-primary" role="alert">
  This is a soft primary alert—check it out!
</div>
<div class="alert alert-soft-secondary" role="alert">
  This is a soft secondary alert—check it out!
</div>
<div class="alert alert-soft-success" role="alert">
  This is a soft success alert—check it out!
</div>
<div class="alert alert-soft-danger" role="alert">
  This is a soft danger alert—check it out!
</div>
<div class="alert alert-soft-warning" role="alert">
  This is a soft warning alert—check it out!
</div>
<div class="alert alert-soft-info" role="alert">
  This is a soft info alert—check it out!
</div>
<div class="alert alert-soft-light" role="alert">
  This is a soft light alert—check it out!
</div>
<div class="alert alert-soft-dark" role="alert">
  This is a soft dark alert—check it out!
</div>
Copy