Bootstrap 5 Toasts show() Method

Last Updated : 31 Jul, 2024

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>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        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=
"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">
                    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>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        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=
"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">
                        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=
"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">
                        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>