Bootstrap 5 Alerts
Alerts
Bootstrap 5 provides an easy way to create predefined alert messages:
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
Alerts are created with the .alert class, followed by one of the
contextual classes .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark:
Example
<div class="alert alert-success">
<strong>Success!</strong>
Indicates a successful or positive action.
</div>
Alert Links
Add the .alert-link class to any links inside the alert box to create
"matching colored links":
Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.
Primary! You should read this message.
Secondary! You should read this message.
Dark! You should read this message.
Light! You should read this message.
Example
<div class="alert alert-success">
<strong>Success!</strong> You
should <a href="#" class="alert-link">read this
message</a>.
</div>
Closing Alerts
Success! This alert box could indicate a successful or positive action.
To close the alert message, add a .alert-dismissible
class to the alert container. Then add class="btn-close" and data-bs-dismiss="alert"
to a link or a button element (when you click on this the alert box will
disappear).
Example
<div class="alert alert-success alert-dismissible">
<button
type="button" class="btn-close"
data-bs-dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a successful or
positive action.
</div>