Recommended Free Tools
To build a free Bootstrap alert, combine .alert with one contextual class, such as .alert-success, and write the message so its meaning is clear without relying on color. Add dismissal only when readers should be able to remove the notice; a dismissible alert needs Bootstrap JavaScript and care with keyboard focus.
Choose the alert style that fits the message
Bootstrap 5.3 provides eight contextual variants. The class changes the alert’s appearance; the text should explain what happened or what the reader needs to do.
As an Amazon Associate I earn from qualifying purchases.
| Variant class | Typical use |
|---|---|
.alert-primary |
General primary or prominent information |
.alert-secondary |
Secondary information |
.alert-success |
A successful action or result |
.alert-danger |
An error or potentially serious problem |
.alert-warning |
A caution or action that may need attention |
.alert-info |
Informational context |
.alert-light |
A light visual treatment |
.alert-dark |
A dark visual treatment |
Use role="alert" for an important message that should be announced to assistive technology. Bootstrap cautions that color alone is only a visual cue and is not conveyed to screen-reader users. Make the message itself explicit; for example, say “Your changes were saved” rather than relying on a green background to imply success. For links within an alert, .alert-link provides a link style suited to the variant.
Make a basic alert
This Bootstrap 5.3 example uses the success variant. Replace the class and message to suit the situation.
#1 Best Overall
<div class="alert alert-success" role="alert">
Your changes were saved.
</div>Keep an alert in the document when it contains information readers may need to refer to. Dismissal is a separate behavior, not a requirement for the component.
Add dismissal only when it is useful
A dismissible alert lets a reader intentionally remove a notice from the page. Bootstrap’s data API handles the close action when its JavaScript is loaded; you do not need to initialize an alert instance manually just to use the close button.
<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>.alert-dismissible makes room for the close control. The .fade and .show classes enable the documented transition; omit them if you do not want that transition. When closed, Bootstrap removes the alert element from the DOM. This behavior does not by itself save the dismissal across reloads.
Keep keyboard focus usable after closing
Because closing removes the alert and its close button, keyboard focus can be lost. Bootstrap documents the closed.bs.alert event for handling this case. If the removed alert contained the focused button, move focus to a sensible destination, such as the next relevant control or a heading associated with the updated content.
Rank #3
const alertElement = document.querySelector('#session-alert');
const nextControl = document.querySelector('#continue-button');
alertElement.addEventListener('closed.bs.alert', () => {
nextControl.focus();
});If the destination is not normally focusable, give it tabindex="-1" so code can focus it without adding it to the ordinary Tab sequence. Choose the destination based on what changed and what the user should do next; do not send focus to an unrelated part of the page.
Load Bootstrap 5.3.8 using a matching setup
The official Bootstrap v5.3 quick start documents version 5.3.8 CDN assets. For a CDN setup, use the CSS and JavaScript URLs together with their matching integrity and crossorigin attributes from the Bootstrap 5.3 Get started guide. Copy the current values as a set rather than mixing a URL from one version with an integrity hash from another. Recheck them when updating Bootstrap.
The quick start also points to package-manager and source workflows. Choose CDN inclusion for a straightforward setup without a build step, or use the project’s package-managed workflow when that better fits its dependency and build process. In either case, load Bootstrap’s JavaScript if you use dismissible alerts.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Customize with version-appropriate guidance
For standard cases, use the provided variant classes. Bootstrap 5.3 alerts also use local CSS variables for styling; consult the Bootstrap v5.3 alerts documentation for the variables and examples. The older alert-variant() Sass mixin is deprecated as of Bootstrap 5.3.0, so do not assume older Sass snippets are the current customization path.
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.
