Bootstrap 5 Toasts Events

Last Updated : 15 Dec, 2022

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>