Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Bootstrap 5 alerts display contextual feedback such as success, warning, or error messages. Create one with the .alert class and a variant such as .alert-success. To let users close it, add a button with data-bs-dismiss="alert" and load Bootstrap’s JavaScript. Because closing removes the alert from the page, plan where keyboard focus should go next.
What Bootstrap alerts are for
An alert is a message about an action or system state. Bootstrap 5 documents eight contextual variants: primary, secondary, success, danger, warning, info, light, and dark. Choose a variant that reinforces the message, but do not make color carry its meaning by itself. Bootstrap’s Alerts documentation warns: “Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.” Write the message so its meaning is clear in text.
How to create a basic Bootstrap 5 alert
Add .alert and one contextual variant to an element. For example:
<div class="alert alert-success" role="alert">
Your changes have been saved.
</div>The role="alert" identifies the message as an alert to assistive technology. Replace the variant and message to suit the state being communicated; for example, use .alert-danger for an error. Keep the text informative rather than relying on the background color or an icon alone.
#1 Best Overall
How to make an alert dismissible
For a close control, load Bootstrap 5’s alert JavaScript behavior and include a real button with data-bs-dismiss="alert". The .alert-dismissible class reserves room for the button; aria-label="Close" gives the icon-only button an accessible name.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Your session will expire soon.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>Bootstrap’s data API handles this dismissal automatically, so you do not need to construct an alert instance when dismissal is the only behavior required. With .fade and .show, the alert transitions before removal. Without those classes, it closes without that fade transition. A dismiss action removes the alert element from the DOM; it does not merely hide it.
Manage keyboard focus after dismissal
Removing the alert can leave a keyboard user without a predictable focus location. Listen for Bootstrap’s closed.bs.alert event, which fires after closing and any CSS transition, then move focus to the next useful control or page location. Bootstrap documents adding tabindex="-1" to a destination that is not normally focusable.
const alertElement = document.querySelector('#session-alert');
const nextStep = document.querySelector('#continue-button');
alertElement.addEventListener('closed.bs.alert', () => {
nextStep.focus();
});Choose the destination based on what the user should do next; do not send focus to an unrelated control. If the destination is a heading or other non-focusable element, add tabindex="-1" to it before calling focus(). The close.bs.alert event fires when closing begins, while closed.bs.alert fires after closure, making the latter suitable when focus should move after removal.
Use markup that matches your Bootstrap version
Dismissal attributes and JavaScript differ by major version. Check the version installed in your project and use its matching documentation before copying an example.
| Bootstrap version | Dismissal attribute or behavior | Documentation |
|---|---|---|
| 5 | data-bs-dismiss="alert"; Bootstrap 5 alert JavaScript handles the data API. |
Bootstrap 5.3 Alerts |
| 4 | data-dismiss="alert"; the documented alert plugin uses jQuery. |
Bootstrap 4.6 Alerts |
| 3 | The alert JavaScript plugin is required for fully functioning dismissal. | Bootstrap 3.4 Alerts |
Bootstrap’s v5.3 JavaScript documentation describes the alert plugin and its methods and events at Getting started: JavaScript. A dismiss button cannot close an alert if the relevant JavaScript is unavailable; Bootstrap documents no special fallback for disabled JavaScript. If the message must remain useful without JavaScript, show it without a control that promises dismissal.
Rank #4
Common reasons a Bootstrap alert will not close
- Wrong data attribute: Bootstrap 5 uses
data-bs-dismiss; Bootstrap 4 usesdata-dismiss. An attribute copied from a different major version will not match the expected behavior. - JavaScript behavior is missing: A button with the dismissal attribute needs the alert JavaScript plugin to work. Check that the relevant Bootstrap JavaScript is loaded for the version in use.
- The close control is not a button: Use a button element with
type="button", the dismissal attribute, and an accessible label for an icon-only control. - The element closes but disappears abruptly: The fade transition requires
.fadeand.show; without them, removal can still work but without the transition.
When an alert should not be dismissible
Do not add a close button automatically. If users need the message to understand the current state, or if it contains an unresolved error, keep it visible until the underlying condition changes or the user completes the relevant action. Make a message dismissible when removing it is useful and does not conceal information the user still needs.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
