Bootstrap 5 Alerts JavaScript behavior Triggers

Bootstrap 5 Alert Triggers are used to close an alert. An alert can be closed using a close button inside the alert or by using a button outside the alert with a data-bs-target attribute. It should be noted that closing the alert also removes it from the DOM.

Bootstrap 5 Alert Triggers used attributes:

• data-bs-dismiss: This attribute is used to make a dismiss button inside the alert.
• data-bs-target: This attribute is used to make a dismiss button outside the alert.

Syntax:

<div class="alert" role="alert">
 ...
 <button class="btn-close" data-bs-dismiss="alert">
 ...
 </button>
</div>

Return value: This method does not return any value.

Example 1: In this example, we used a close button inside the alert element to close the alert.

Output:

Example 2: In this example, we used the button that is outside the alert element to close the alert. We used the data-bs-target to target the alert we want to close using the button.

Output:

Reference: https://getbootstrap.com/docs/5.2/components/alerts/#triggers