Bootstrap Alerts

Bootstrap 5 Alerts

Alerts provide contextual feedback messages for typical user actions. Bootstrap 5 offers a range of predefined alert styles that are easy to implement and customize.

Basic Alerts

Bootstrap provides several contextual alert classes:

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  **Success!** This alert box indicates a successful or positive action.
</div>
<div class="alert alert-info" role="alert">
  **Info!** This alert box indicates a neutral informative change or action.
</div>
<div class="alert alert-warning" role="alert">
  **Warning!** This alert box indicates a warning that might need attention.
</div>
<div class="alert alert-danger" role="alert">
  **Danger!** This alert box indicates a dangerous or potentially negative action.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

<!--
  Accessibility Note: Always include `role="alert"` on alert messages to ensure they are announced by assistive technologies.
  For critical alerts, consider `role="alertdialog"` or JavaScript focus management.
-->

Alerts are created with the base .alert class, followed by one of the contextual classes: .alert-primary, .alert-secondary, .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-light, or .alert-dark.

Application Scenario: Use success alerts for successful form submissions, danger alerts for errors, and info/warning alerts for important notices.

Alerts with Links and Additional Content

You can include links within alerts using the .alert-link utility class on an <a> tag to provide matching colored links.

<div class="alert alert-warning" role="alert">
  You should check in on <a href="#" class="alert-link">this important alert message</a>.
</div>

<div class="alert alert-success" role="alert">
  <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>

<!-- Tip: Use heading elements (`<h4>` in this example) and paragraphs within alerts for more structured content. The `<hr>` element can provide a visual separator. -->

Dismissing Alerts

To make alerts dismissible, add the .alert-dismissible class to the alert <div>. Then, add a close button with the class .btn-close and the attribute data-bs-dismiss="alert".

×
Success! This alert box can be closed.

<div class="alert alert-success alert-dismissible fade show" role="alert">
  **Success!** You can close this alert message.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  **Error!** Something went wrong. Please try again.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!--
  Explanation:
  - `.alert-dismissible`: Required for proper positioning of the close button.
  - `.btn-close`: Styles the button as a close icon.
  - `data-bs-dismiss="alert"`: The JavaScript trigger to close the alert.
  - `aria-label="Close"`: Crucial for accessibility, providing a label for screen readers.
  - `.fade` and `.show`: Classes for animating the alert dismissal with a fade effect. `.show` makes it visible initially.
-->

Common Pitfall: Forgetting to include Bootstrap’s JavaScript file (bootstrap.bundle.min.js which includes Popper) will prevent dismissible alerts from working, as the data-bs-dismiss functionality relies on it.

JavaScript Triggers and Events for Alerts

While data-bs-dismiss is common, you can also control alerts via JavaScript.

// Get an alert instance
var myAlert = document.getElementById('myDismissibleAlert');
if (myAlert) {
  var bsAlert = new bootstrap.Alert(myAlert);

  // To close an alert programmatically:
  // bsAlert.close();
}

// Listening to alert events
var anAlertElement = document.getElementById('myEventAlert');
if (anAlertElement) {
 anAlertElement.addEventListener('close.bs.alert', function () {
    console.log('Alert is about to be closed.');
  });
  anAlertElement.addEventListener('closed.bs.alert', function () {
    console.log('Alert has been closed.');
  });
}

/*
  Available Events:
  - `close.bs.alert`: Fires immediately when the `close` instance method is called.
  - `closed.bs.alert`: Fired when the alert has been closed (will wait for CSS transitions to complete).
  For more on JavaScript usage: https://getbootstrap.com/docs/5.3/components/alerts/#javascript-behavior
*/

Complete Bootstrap Alert Reference

For a full guide on alerts, including advanced JavaScript options and how to integrate icons, please refer to the official Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/components/alerts/