Create an alert with Bootstrap’s .alert class and a contextual variant such as .alert-success. To let visitors dismiss it, include Bootstrap’s JavaScript alert plugin and add a close button with data-bs-dismiss="alert". The examples below use the documented Bootstrap v5.3 API; “V12” is not identified in the official documentation as an alert or Bootstrap release.
Make a basic Bootstrap alert
Bootstrap alerts are for important process information, such as an error that needs attention. Add role="alert" and describe the message in text, rather than relying on its color to convey meaning.
As an Amazon Associate I earn from qualifying purchases.
<div class="alert alert-success" role="alert">
Your changes have been saved.
</div>The official Bootstrap v5.3 alerts documentation shows eight contextual variants:
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →alert-primaryalert-secondaryalert-successalert-dangeralert-warningalert-infoalert-lightalert-dark
Choose the variant that fits your design, but make the actual message understandable without color. Bootstrap warns that some default color combinations may fall below recommended WCAG 2.2 contrast ratios; check the foreground and background colors you use rather than assuming every variant passes. See the Bootstrap accessibility guidance.
#1 Best Overall
Make an alert dismissible
A dismissible alert needs Bootstrap’s alert JavaScript behavior, the alert-dismissible class, and a semantic button carrying data-bs-dismiss="alert". Bootstrap’s compiled JavaScript or alert plugin is required; the data attribute lets Bootstrap initialize the dismissal behavior.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Check this:</strong> Review the information before continuing.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>The fade and show classes provide the documented dismissal animation. The button’s accessible name comes from aria-label="Close"; keep it a button rather than substituting a non-interactive icon.
Account for focus when an alert closes
Bootstrap removes a dismissed alert from the DOM. If someone was focused on its close button, that removal can leave keyboard focus without a useful destination. For alerts where this matters, listen for the closed.bs.alert event and deliberately move focus to the next appropriate control or to a suitable page location made focusable. Bootstrap describes the removal behavior in its alert events documentation.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose an alert or a toast
Use an alert when the information is important to completing a process, such as correcting a form error. A toast is for a lightweight notification. An automatically disappearing message may vanish before someone can read or act on it, so choose the component and timing according to the message’s importance.
Rank #3
For toasts, Bootstrap says the live region should exist before the toast is inserted, and its role and urgency should suit the message. Follow the Bootstrap toast accessibility guidance when implementing one.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Version and licensing notes
This guide follows the official Bootstrap v5.3 documentation, not a verified “Alert V12” release. The v5.3 alert page notes that alerts gained local CSS variables in v5.2.0 and that the alert-variant() Sass mixin is deprecated as of v5.3.0. Check the documentation for the Bootstrap version in your project if you use another release.
Bootstrap’s getting-started page states that the framework is MIT-licensed and its documentation is licensed under CC BY 3.0. It also directs users to package managers for source files and identifies alerts as a component requiring JavaScript for dismissal.
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.
