Bootstrap 5 Alerts JavaScript behavior Events

In this article, we will learn about the Alerts JavaScript behavior Events fired when interacting with Bootstrap 5 Alerts. Bootstrap 5 Alert component is useful for providing alerts or feedback messages arising from the user interacting with the functionalities of the application.

Bootstrap 5 Alerts JavaScript behavior Events

• close.bs.alert: It is fired as soon as the close() method of the instance is called. 
• closed.bs.alert: It is fired when the alert is completely closed after all the CSS transitions are done.

Syntax:

let myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
...
})

Let us understand more about this using some examples below:

Example 1: In this example, we will listen for the alert javascript behavior event, close.bs.alert,  that gets fired immediately when an alert is closed.

Output:

Example 2: In this example, we will listen for the alert javascript behavior event, closed.bs.alert,  that gets fired when an alert is closed completely.

Output:

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