Bootstrap 5 Alerts Dismissing

Bootstrap 5 Alerts Dismissing provides a feature to dismiss the alerts inline and to enable alerts dismissing we need to add the .alert-dismissible class to the alert, and the data-bs-dismiss="alert" attribute to the close button.

Syntax:

<div class="alert alert-dismissible">
 <button type="button" class="btn-close" 
 data-bs-dismiss="alert">
 </button>
</div>

Bootstrap 5 Alerts Dismissing Classes:

• alert-dismissible: This class is used to signify that a specific alert has dismissing capabilities.

Bootstrap 5 Alerts Data Attributes:

• data-bs-alert: This is the compulsory data attribute for the dismissing alert and this is needed to be added to the button which will be used to dismiss the alert. Ti necessarily needs the "alert" as its value.

Example 1: This code example shows how to create an alert with a linkdismissable:

Output:

Example 2: This code example demonstrates how we can trigger an alert from a button and we can add dismissal to it:

Output:

Reference:https://getbootstrap.com/docs/5.0/components/alerts/#dismissing