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
Free Bootstrap alerts use the .alert class with one contextual variant, such as .alert-success. For Bootstrap 5.3, add the framework’s JavaScript only when you need dismissal; make the message understandable without relying on its color, and plan where keyboard focus should go after it closes.
How do you create a basic Bootstrap alert?
Combine .alert with one contextual class and give the alert an accessible role:
<div class="alert alert-success" role="alert">
Your changes have been saved.
</div>The modifier controls the visual treatment; the words should explain the actual message. Bootstrap’s official v5.3 alerts documentation provides eight variants:
Free tools Windows power users keep installed
One-click scans. No signup required.
.alert-primary.alert-secondary.alert-success.alert-danger.alert-warning.alert-info.alert-light.alert-dark
Alert content can be longer than a single sentence. For a link that fits the alert’s styling, add .alert-link to the anchor:
#1 Best Overall
<div class="alert alert-info" role="alert">
Read the <a href="/help" class="alert-link">help guide</a> for details.
</div>How do you make an alert accessible?
Do not use color as the only way to communicate whether a message is a success, warning, or error. Bootstrap cautions that color alone is a visual indication and is not conveyed to screen-reader users. State the message clearly in text and, where useful, include an additional cue such as an explicit “Warning” label.
The role="alert" attribute identifies the message as an alert to assistive technologies. Keep the content concise enough to understand, but include the information a reader needs to respond.
How do you create a dismissible Bootstrap alert?
Use .alert-dismissible and a close button with data-bs-dismiss="alert". Bootstrap’s JavaScript alert plugin must be loaded for the button to work. With Bootstrap’s documented data API, you do not need to initialize an alert instance manually just to enable dismissal.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →<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>.fade and .show are optional classes for the documented transition. When dismissed, the alert is removed from the DOM. That behavior does not by itself save the dismissal across a page reload.
Keep keyboard focus usable after dismissal
When the close button removes its alert, keyboard focus may be lost. Bootstrap documents the closed.bs.alert event for responding after closure. If the user needs to continue at a particular control or section, move focus there when the event fires. A non-interactive destination may need tabindex="-1" so it can receive programmatic focus.
Choose a destination that makes sense in the surrounding interface; do not send focus to an unrelated part of the page. For alerts that are only informational and should remain available, omit the close button rather than making dismissal the default.
Rank #4
How do you add Bootstrap 5.3 to a project?
The official Bootstrap v5.3 setup page documents CDN inclusion as well as package-managed and source workflows. CDN setup avoids a build step; a project already using a package manager can follow its existing dependency workflow. Choose one that suits the project, and use the documentation’s matching CSS and JavaScript versions.
The v5.3 quick start currently documents version 5.3.8 CDN assets. To avoid mismatched or stale integrity values, copy the CSS and JavaScript URLs together with their corresponding integrity and crossorigin attributes from the official setup page. Check that page again when updating versions rather than mixing attributes from different releases.
How can you customize alert styles?
For standard messages, the contextual classes are the simplest option. Bootstrap v5.3 alerts use local CSS variables for customization. The documentation marks the alert-variant() Sass mixin as deprecated as of v5.3.0, so older Sass examples that rely on that mixin should not be treated as the current v5.3 customization path. Follow the version-specific alerts documentation when changing colors or other alert styles.
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.
