Bootstrap 5 Alert Boxes

Bootstrap 5 makes it easy to implement alert boxes.

Alert boxes can be created using the .alert class, followed by .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, or .alert-dark classes:

Example

<div class="alert alert-success">
  <strong>Success!</strong> This indicates a successful or positive action.
</div>

Adding Links to Alerts

To match the alert color, add the alert-link class to links within the alert:

Example

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

Closing Alerts

Add the .alert-dismissible class to the alert's div, and then add class="btn-close" and data-dismiss="alert" to the close button for the dismiss action:

Example

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Success!</strong> This indicates a successful or positive action.
</div>

Alert Animation

The .fade and .show classes are used to animate the alert when it is closed:

Example

<div class="alert alert-danger alert-dismissible fade show">