Bootstrap 5 Toasts Events

Bootstrap5 Toasts Events are events that take place when the toast triggers a specific instance method. These are used to perform some tasks when these instances are triggered.

Toasts Events:

• show.bs.toast: This event is called when show instance method of toast is called.
• shown.bs.toast: This event is called when toast is shown to the user.
• hide.bs.toast: This event is called when the toast hide instance is evoked.
• hidden.bs.toast: This event is called when toast closing is finished.

Syntax:

var myToastEl = document.getElementById('#id')
myToastEl.addEventListener($EVENT, function () {
 ...
})

The $EVENT can be replaced by any of the above-mentioned events.

Example 1: In this example, we will learn about shown.bs.toast. It will trigger after the toast is shown.

Output:

👁 Image

Example 2: In this example, we will learn about hidden.bs.toast which is triggered when the toast is hidden.

Output:

👁 Image

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