Bootstrap 5 Alerts

Alerts

Bootstrap 5 provides an easy way to create predefined alert messages:

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>

Try it Yourself »

Alert Links

Add the .alert-link class to any links inside the alert box to create "matching colored links":

Example

<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Try it Yourself »

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>

Try it Yourself »

Animated Alerts

The .fade and .show classes adds a fading effect when closing the alert message:

Example

Try it Yourself »

❮ Previous Next ❯