Bootstrap 5 Alerts


Bootstrap 5 provides a flexible and easy-to-use system for displaying alerts or messages to users. Alerts are often used to provide feedback, notifications, or warnings to the user.

To create a basic alert, use the .alert class. You can also add an alert type class such as .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark to change the alert's color.

Example 
<div class="alert alert-success">
  <strong>Success!</strong> This is a simple alert.
</div>
Try it Yourself

Output:


Alert Links

You can add links inside an alert using the <a> element.

Example 
<div class="alert alert-primary">
  A simple primary alert with a link. <a href="#" class="alert-link">Click here</a>
</div>
Try it Yourself

Output:


Dismissible Alert

In Bootstrap 5, dismissing alerts can be done using JavaScript and the built-in Bootstrap functions.

  • alert-dismissible is a class that makes the alert dismissible.
  • Create a button with the class btn-close and the data-bs-dismiss="alert" attribute is the close button.
  • The data-bs-dismiss="alert" attribute on the close button tells Bootstrap to dismiss the alert when the button is clicked.
Example 
<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Success!</strong> This is a dismissible alert.
</div>
Try it Yourself

Output:


Animated Alerts

Bootstrap 5 provides built-in classes to animate alerts with fading effects.

  • .fade is a class that adds a fade-in animation to the alert.
  • .show class initially displays the alert. It's necessary to trigger the fade-in animation.
Example 
<div class="alert alert-success alert-dismissible fade show">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Success!</strong> This is a success alert with a fade animation..
</div>
Try it Yourself

Output: