Bootstrap alerts display contextual feedback—such as success, warning, or error messages—using HTML classes and CSS. In Bootstrap 5, add .alert and one of eight contextual classes. To let users dismiss an alert, add a close button with data-bs-dismiss="alert" and load Bootstrap’s JavaScript. Use markup that matches your project’s Bootstrap version.
Choose the right Bootstrap alert variant
Bootstrap 5 provides eight contextual classes: .alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light, and .alert-dark. Choose the class that best reinforces the message, but state the meaning in words as well. Bootstrap cautions that color alone does not communicate meaning to screen-reader users (Bootstrap 5.3 Alerts documentation).
As an Amazon Associate I earn from qualifying purchases.
Create a basic alert
Use the alert class with a contextual variant and an appropriate role. This example presents a success message:
<div class="alert alert-success" role="alert">
Your changes have been saved.
</div>Replace the message and variant to match the state you need to communicate. An alert that only displays information does not need a dismiss button.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Add a dismiss button in Bootstrap 5
For an alert users can close, add .alert-dismissible and a real button with data-bs-dismiss="alert". The class reserves space for the button. Give it an accessible name, such as aria-label="Close":
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Your session is about to expire.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>The Bootstrap alert JavaScript plugin must be available for the dismissal control to work. If you are using Bootstrap’s data API, the data-bs-dismiss attribute initializes the behavior; you do not need to manually create an alert instance just to dismiss it. The .fade and .show classes enable a fade transition before removal (Bootstrap 5.3 Alerts documentation).
Manage focus after dismissal
Dismissing an alert removes it from the DOM. For keyboard users, that removal can leave focus lost or reset to the start of the page. Listen for closed.bs.alert and move focus to the next relevant control or location. If that destination is not normally keyboard-focusable, Bootstrap’s v5.0 documentation advises adding tabindex="-1" so code can move focus there (Bootstrap 5.0 Alerts documentation).
Bootstrap fires close.bs.alert when closing begins and closed.bs.alert after closing and any CSS transition. Use the latter when focus should move after the alert has finished closing (Bootstrap 5.3 Alerts documentation).
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Match the dismissal markup to your Bootstrap version
Dismissal attributes and JavaScript setup differ across major versions. Check which version your project uses before copying an example.
| Version | Dismissal detail | Documentation |
|---|---|---|
| Bootstrap 5 | Use data-bs-dismiss="alert"; Bootstrap’s data API handles initialization when the alert JavaScript is loaded. |
Bootstrap 5.3 Alerts |
| Bootstrap 4 | The documented attribute is data-dismiss="alert", used with the jQuery plugin. |
Bootstrap 4.6 Alerts |
| Bootstrap 3 | The alert JavaScript plugin is required for dismissal. | Bootstrap 3.4 Alerts |
Troubleshoot a close button that does not work
- Check the attribute for your version. Bootstrap 5 uses
data-bs-dismiss; Bootstrap 4 usesdata-dismiss. A version mismatch can prevent the expected behavior. - Confirm the alert JavaScript is loaded. The dismiss attribute alone does not provide the behavior if the required plugin is unavailable.
- Use a button element. The documented pattern uses a button with
type="button"and an accessible label. - Do not promise dismissal when JavaScript is disabled. Bootstrap documents no special fallback for its plugins in that case. A static alert can still convey its message, but a close control should not imply that it will work (Bootstrap JavaScript documentation).
When to make an alert dismissible
Use a dismiss control when removing the message is useful to the person using the page. Keep important status or error information visible if closing it could hide information needed to complete a task. Whether the alert is static or dismissible, make its meaning clear in text and ensure keyboard focus has a predictable destination when the alert is removed.
Quick Recap
Best Value
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.
Free tools Windows power users keep installed
One-click scans. No signup required.
