Open In App

Bootstrap 5 Toasts show() Method

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Toasts are a type of alert box that is used to show a message or an update to the user. For example, submitting a form, clicking a button, or maybe a push notification inside the website. The alert box type of toast is shown for a couple of seconds. 

The show() method is used to show the toast when it is triggered.

Syntax:

toast.show()

Return Value: This method returns to the caller before the toast has actually been shown. 

Example 1: The example below demonstrates the usage of the Toasts show() Method using buttons.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <h3>Bootstrap 5 Toasts show() Method</h3>
          
        <p class="mt-4">
            The button below is used to trigger the toast.
        </p>
  
        <button type="button" class="btn btn-success" 
            id="toastbtn">
            Show Toast
        </button>
  
        <div class="toast">
            <div class="toast-header">
                <img src=
                    class="img-thumbnail rounded me-2" 
                    width="40px" alt="GFG Logo">
                <strong class="me-auto">
                    Welcome to GeeksforGeeks
                </strong>
                  
                <button type="button" class="btn-close" 
                    data-bs-dismiss="toast">
                </button>
            </div>
  
            <div class="toast-body">
                <p>
                    This is a computer science 
                    portal for geeks.
                </p>
            </div>
        </div>
    </div>
  
    <script>
        document.getElementById("toastbtn")
        .onclick = function () {
            var toastElList = [].slice
                .call(document.querySelectorAll('.toast'));
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
        }
    </script>
</body>
  
</html>


Output:

 

Example 2: The example below demonstrates the usage of the Bootstrap 5 Toasts show() Method using buttons and with the stacking of the toasts.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <h3>Bootstrap 5 Toasts show() Method</h3>
          
        <p class="mt-4">
            The button below is used to trigger the toast.
        </p>
  
        <button type="button" class="btn btn-success" 
            id="toastbtn-1">Show Toast 1</button>
        <button type="button" class="btn btn-success" 
            id="toastbtn-2">Show Toast 2</button>
  
        <div class="toast-container">
            <div class="toast" id="toast-1">
                <div class="toast-header">
                    <img src=
                        class="img-thumbnail rounded me-2" 
                            width="40px" alt="GFG Logo">
                    <strong class="me-auto">
                        Welcome to GeeksforGeeks
                    </strong>
                      
                    <button type="button" class="btn-close" 
                        data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    <p>
                        This is a computer science 
                        portal for geeks.
                    </p>
                </div>
            </div>
  
            <div class="toast" id="toast-2">
                <div class="toast-header">
                    <img src=
                        class="img-thumbnail rounded me-2" 
                        width="40px" alt="GFG Logo">
                    <strong class="me-auto">
                        This is GeeksforGeeks
                    </strong>
                      
                    <button type="button" class="btn-close" 
                        data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    <p>
                        This is a place to get quality 
                        informative articles.
                    </p>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        document.getElementById("toastbtn-1")
        .onclick = function () {
            var toastElList = [].slice.call(
                document.querySelectorAll('#toast-1'))
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
        }
          
        document.getElementById("toastbtn-2")
        .onclick = function () {
            var toastElList = [].slice.call(
                document.querySelectorAll('#toast-2'))
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
        }
    </script>
</body>
  
</html>


Output:

 

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



Last Updated : 17 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads