Bootstrap Alerts
Alerts are colored message boxes used to give feedback to users, such as success confirmations, warnings, or error messages. Add the .alert class plus a contextual color class like .alert-success.
Alerts can also be dismissible, allowing users to close them with an animated fade by adding a close button and the required JavaScript classes.
<div class="alert alert-success">Message</div>Basic alerts
Add .alert and a color variant such as .alert-danger, .alert-warning, or .alert-info to a <div> to display a styled message box.
Dismissible alerts
Add .alert-dismissible and a button with class .btn-close and data-bs-dismiss="alert" to let users close the alert. Bootstrap's JS handles the fade-out animation.
<div class="alert alert-success">
Your changes have been saved successfully!
</div>A green box with a success messagealert-success gives the box a green theme suited to positive feedback.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
This action cannot be undone.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>A yellow alert box with a close (x) button that fades out when clickedalert-dismissible plus the btn-close button lets the user close the alert with a smooth fade animation.
Key points
- Add .alert plus a color class like .alert-info to style a message box.
- Available colors include success, danger, warning, and info.
- .alert-dismissible with .btn-close makes alerts closable.
- data-bs-dismiss="alert" triggers Bootstrap's JS to remove the alert.