Code
.alert .alert-(contextual class)
.alert-link
.alert-dismissible
.btn-close
data-bs-dismiss="alert"
.fade
.show
Definitions
- Alert
- ▪ Components that provide contextual feedback messages for typical user actions.
- Alert Link
- ▪ Styles the links inside an alert similarly.
- Alert Dismissible
- ▪ Allows an alert to be closed by the user.
- Button Close
- ▪ Renders an 'x' indicating a close button.
data-bs-close="alert"- ▪ Links the button to the element to close (in this case, an alert).
- Fade
- ▪ Adds a brief animation when the alert is dismissed.
- Show
- ▪ When an alert is animated, show displays the alert. It is hidden by default.
Key Points
- You can add additional elements to alerts like headings, paragraphs and dividers.
- You can place Bootstrap Icons or third-party icons like Font Awesome inside alerts.
- Make sure text inside an alert has sufficient color contrast for accessibility standards.
-
As alerts are typically inside a <div>, add
role="alert"for accessibility.
Basic
Success!This alert box could indicate a successful or positive action.
Info: This alert box could indicate a neutral infomative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary: This alert box could indicate an important action.
Secondary: This alert box could indicate a slightly less important action.
Dark: This alert box is actually Dark Gray and not Dark!
Light: This alert box is Light Gray.
Add .alert .alert-* to an element, where * indicates a contextual class.
Links inside Alerts
Add alert-link to the <a> element.
Closing Alerts
Success!This alert box could indicate a successful or positive action.
Info: This alert box could indicate a neutral infomative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary: This alert box could indicate an important action.
Secondary: This alert box could indicate a slightly less important action.
Dark: This alert box is actually Dark Gray and not Dark!
Light: This alert box is Light Gray.
Add .alert-dismissible to the <div>.
Create a button with .btn-close and data-bs-dismiss="alert".
Warning: Don't forget your aria-label on the button!
Animated Alerts
Success!This alert box could indicate a successful or positive action.
Info: This alert box could indicate a neutral infomative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary: This alert box could indicate an important action.
Secondary: This alert box could indicate a slightly less important action.
Dark: This alert box is actually Dark Gray and not Dark!
Light: This alert box is Light Gray.