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 alerts are free to use and straightforward to add: apply .alert and a contextual class such as .alert-success. To make an alert dismissible, include Bootstrap’s alert JavaScript plugin and add the documented close button. The examples below use the official Bootstrap v5.3 API; “V12” is not identified in that documentation as a Bootstrap release or alert version.
Build a basic Bootstrap alert
Add .alert and one of Bootstrap’s contextual variant classes to an element. Bootstrap’s v5.3 examples also set role="alert" so assistive technology can identify the message as an alert.
<div class="alert alert-success" role="alert">
Your changes have been saved.
</div>Bootstrap v5.3 documents eight variants: alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, and alert-dark. Choose the variant that fits the message, but include its meaning in text rather than relying on color alone. See Bootstrap’s alert examples.
Recommended Free Tools
Make an alert dismissible
Dismissal requires Bootstrap’s alert JavaScript behavior as well as the HTML classes and button. Load Bootstrap’s compiled JavaScript or include the alert plugin. The data-bs-dismiss="alert" attribute connects the button to the component’s dismissal behavior.
#1 Best Overall
<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>alert-dismissiblemakes room for the close control.btn-closestyles the button, andaria-label="Close"gives it an accessible name.fade showenables the documented dismissal animation; the alert can still be dismissed without those animation classes.
Bootstrap documents automatic initialization of dismissal through the data attribute. Its getting-started page lists alerts among the components that need JavaScript for dismissal. Bootstrap getting started.
Choose an alert or a toast
Use an alert when a person needs important process information to complete or recover from an action—for example, a form error. A toast is intended for lightweight notification UI. Avoid making an important message disappear automatically before someone has had a chance to read and act on it.
| Decision | Alert | Toast |
|---|---|---|
| Typical purpose | Important process information, such as a form error | Lightweight notification |
| How long it remains | Can remain until the person responds or dismisses it | May be temporary; consider whether a reader has enough time to act |
| Assistive technology | Use alert semantics and make the message clear in text | Bootstrap advises creating its live region before inserting the toast and choosing announcement role and urgency appropriate to the message |
Bootstrap’s component guidance covers both alerts and toasts.
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 →Keep alerts accessible when they close
Do not rely on variant color as the only indication of meaning. Include the meaning in the visible message or another accessible text form. Bootstrap cautions that some default color combinations may fall below recommended WCAG 2.2 contrast ratios, so check the specific foreground and background colors you use rather than assuming every variant passes. Bootstrap accessibility guidance.
Dismissing an alert removes it from the page structure. That can leave keyboard users without a useful focus position. When necessary, listen for closed.bs.alert and move focus to the next appropriate control or to a deliberately focusable location in the page. Bootstrap documents this removal behavior in its alert documentation.
Version and license notes
The examples here follow the official Bootstrap v5.3 documentation; “Alert V12” is not established there as a version. The documentation says 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 version used by your project before adapting the examples.
Rank #4
Bootstrap’s getting-started page states that the framework is MIT-licensed and its documentation is licensed under CC BY 3.0. Read the official getting-started page.
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.
