AdminKit

Bootstrap 5 Alerts

Alerts ​

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

WARNING

This feature is only available in AdminKit PRO. Learn more.

Example ​

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts JavaScript plugin.

html
<div class="alert alert-primary" role="alert">
  <div class="alert-message">
    A simple primary alert—check it out!
  </div>
</div>
<div class="alert alert-secondary" role="alert">
  <div class="alert-message">
    A simple secondary alert—check it out!
  </div>
</div>
<div class="alert alert-success" role="alert">
  <div class="alert-message">
    A simple success alert—check it out!
  </div>
</div>
<div class="alert alert-danger" role="alert">
  <div class="alert-message">
    A simple danger alert—check it out!
  </div>
</div>
<div class="alert alert-warning" role="alert">
  <div class="alert-message">
    A simple warning alert—check it out!
  </div>
</div>
<div class="alert alert-info" role="alert">
  <div class="alert-message">
    A simple info alert—check it out!
  </div>
</div>
<div class="alert alert-light" role="alert">
  <div class="alert-message">
    A simple light alert—check it out!
  </div>
</div>
<div class="alert alert-dark" role="alert">
  <div class="alert-message">
    A simple dark alert—check it out!
  </div>
</div>

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

html
<div class="alert alert-primary" role="alert">
  <div class="alert-message">
    A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-secondary" role="alert">
  <div class="alert-message">
    A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-success" role="alert">
  <div class="alert-message">
    A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-danger" role="alert">
  <div class="alert-message">
    A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-warning" role="alert">
  <div class="alert-message">
    A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-info" role="alert">
  <div class="alert-message">
    A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-light" role="alert">
  <div class="alert-message">
    A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>
<div class="alert alert-dark" role="alert">
  <div class="alert-message">
    A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>
</div>

Additional content ​

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

html
<div class="alert alert-success" role="alert">
  <div class="alert-message">
    <h4 class="alert-heading">Well done!</h4>
    <p>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="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
  </div>
</div>

Icons ​

Similarly, you can use flexbox utilities SVG icons to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.

html
<preview>
<div class="alert alert-primary" role="alert">
  <div class="alert-message d-flex align-items-center">
    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
      <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
    </svg>
    <div>
      An example alert with an icon
    </div>
  </div>
</div>
</preview>

Dismissing ​

Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:

  • Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
  • Add a close button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the close button.
  • On the close button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.
  • To animate alerts when dismissing them, be sure to add the .fade and .show classes.

You can see this in action with a live demo:

html
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <div class="alert-message">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
</div>