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.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container text-center col-8">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap 5 Toasts Events
        </h2>
        <div class="container text-center">
            <button type="button" 
                    class="btn btn-primary" 
                    id="success" 
                    onClick="showToast()">
                Show
            </button>
            <div class="toast text-white bg-primary" 
                 id="GFG">
                <div class="toast-header">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
                         class="img-thumbnail rounded me-2" 
                         width="40px" 
                         alt="GFG Logo">
                    <strong class="me-auto">
                        Toast Events
                    </strong>
                    <button type="button" 
                            class="btn-close" 
                            data-bs-dismiss="toast">
                    </button>
                </div>
                <div class="toast-body">
                    <p>
                        Welcome to GeeksforGeeks
                    </p>
                </div>
            </div>
        </div>
      </div>

    <script>
        function showToast() {
            var toastElList =
                [].slice.call(document.querySelectorAll('.toast'));
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
            var myToastEl = document.getElementById('GFG')
            myToastEl.addEventListener('shown.bs.toast', function () {
                alert("Shown bs Toast called")
            })
        }
    </script>
</body>
  
</html>

Output:

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

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"  
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container text-center col-8">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap 5 Toasts Events
        </h2>
        <div class="container text-center">
            <button type="button" 
                    class="btn btn-primary" 
                    id="success" 
                    onClick="showToast()">
                Show
            </button>
            <div class="toast text-white bg-primary" 
                 id="GFG">
                <div class="toast-header">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
                         class="img-thumbnail rounded me-2" 
                         width="40px" 
                         alt="GFG Logo">
                    <strong class="me-auto">
                        Toast Success
                    </strong>
                    <button type="button" 
                            class="btn-close" 
                            data-bs-dismiss="toast">
                    </button>
                </div>
                <div class="toast-body">
                    <p>
                        Welcome to GeeksforGeeks
                    </p>
                </div>
            </div>
        </div>
      </div>

    <script>
        function showToast() {
            var toastElList =
                [].slice.call(document.querySelectorAll('.toast'));
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
            var myToastEl = document.getElementById('GFG')
            myToastEl.addEventListener('hidden.bs.toast', function () {
                alert("Hidden bs Toast called")
            })
        }
    </script>
</body>
  
</html>

Output:

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

Bootstrap 5 Toasts Events

Explore