Alerts

Examples #

Alerts can be created using the .alert class along with .alert-{color}, where {color} can be primary, secondary, success, danger, warning, info, light, or dark. Please note, there are additional classes such as .alert-heading for titles and .alert-link for links. You can also use additional HTML elements such as paragraphs and dividers inside alerts.

<!-- Primary alert -->
<div class="alert alert-primary" role="alert">
  <h5 class="alert-heading">Primary</h5>
  A simple alert with a heading and content that has an <a href="#" class="alert-link">alert link</a> inside.
</div>

<!-- Secondary alert -->
<div class="alert alert-secondary" role="alert">
  <h5 class="alert-heading">Secondary</h5>
  A simple alert with a heading and content that has an <a href="#" class="alert-link">alert link</a> inside.
</div>

<!-- Success alert -->
<div class="alert alert-success" role="alert">
  <h5 class="alert-heading">Success</h5>
  A simple alert with a heading and content that has an <a href="#" class="alert-link">alert link</a> inside.
</div>

<!-- Danger alert -->
<div class="alert alert-danger" role="alert">
  <h5 class="alert-heading">Danger</h5>
  A simple alert with a heading and content that has an <a href="#" class="alert-link">alert link</a> inside.
</div>

<!-- Warning alert -->
<div class="alert alert-warning" role="alert">
  <h5 class="alert-heading">Warning</h5>
  A simple alert with a heading and content that has an <a href="#" class="alert-link">alert link</a> inside.
</div>

<!-- Info alert -->
<div class="alert alert-info" role="alert">
  <h5 class="alert-heading">Info</h5>
  A simple alert with a heading and content that has an <a href="#" class="alert-link">alert link</a> inside.
</div>

<!-- Light alert -->
<div class="alert alert-light" role="alert">
  <h5 class="alert-heading">Light</h5>
  A simple alert with a heading and content that has an <a href="#" class="alert-link">alert link</a> inside.
</div>

<!-- Dark alert -->
<div class="alert alert-dark" role="alert">
  <h5 class="alert-heading">Dark</h5>
  A simple alert with a heading and content that has an <a href="#" class="alert-link">alert link</a> inside.
</div>

Dismissing #

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

• 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 below.

<!-- Dismissible alerts -->
<div class="alert alert-primary alert-dismissible fade show" role="alert">
  You can set up <strong>scheduled tasks</strong> to create your invoices automatically.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-success alert-dismissible fade show" role="alert">
  Your <strong>message</strong> has been sent.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Heads up!</strong> Changes are permanent and can't be undone once they are made.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Customization and icons #

You can customize alerts with different types of utility classes. Flexbox utilities in particular are great for adding and positioning icons.

<!-- Customizing and adding icons -->
<div class="alert alert-primary border-0 rounded-0 d-flex align-items-center" role="alert">
  <i class="fa-light fa-info-circle text-primary-emphasis me-2"></i>
  <div>Just some <strong>information</strong> to know.</div>
</div>

<div class="alert alert-success border-0 rounded-0 d-flex align-items-center" role="alert">
  <i class="fa-light fa-check-circle text-success-emphasis me-2"></i>
  <div>Your <strong>account</strong> has been created.</div>
</div>

<div class="alert alert-danger border-0 rounded-0 d-flex align-items-center" role="alert">
  <i class="fa-light fa-exclamation-circle text-danger-emphasis me-2"></i>
  <div>Your <strong>repository</strong> has been deleted.</div>
</div>

Please note, the icons being used are taken from the Font Awesome icon library (opens in new tab).

Live example #

Here's a live example where you can click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.

<div id="live-alert-placeholder"></div>
<div class="text-end">
  <button type="button" class="btn btn-primary" id="live-alert-btn">
    Save ticket
  </button>
</div>

const alertPlaceholder = document.getElementById("live-alert-placeholder");
const appendAlert = (message, type) => {
  const wrapper = document.createElement("div");
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    `   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`,
    `</div>`,
  ].join("");
  alertPlaceholder.append(wrapper);
};

const alertTrigger = document.getElementById("live-alert-btn");
if (alertTrigger) {
  alertTrigger.addEventListener("click", () => {
    appendAlert("Your ticket has been saved successfully.", "success");
  });
}

JavaScript usage #

The examples on this page use data-bs-* attributes for functionality, which is usually enough to cover a majority of use-cases. You can read about events, methods, and more in the official Bootstrap documentation.

Alerts - Bootstrap
Continue reading on the offical documentation website