Bootstrap 5 Toasts hide() Method

Last Updated : 30 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 hide() method is used to hide the toast from the display.

Syntax:

toast.hide()

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

Example 1: The example below demonstrates the usage of the Toasts hide() Method using buttons that hides/closes the toast.

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 hide() 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>
        <button type="button" class="btn btn-danger" 
            id="ctoastbtn">Hide 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())
        }
        document.getElementById("ctoastbtn")
        .onclick = function () {
            var toastElList = [].slice.call(
                document.querySelectorAll('.toast'))
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.hide())
        }
    </script>
</body>

</html>

Output:

Example 2: The example below demonstrates the usage of the Bootstrap 5 Toasts hide() 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 hide() Method</h3>
        <p class="mt-4">
            The button below is used to trigger the toast.
        </p>

        <button type="button" class="btn btn-success mb-3" 
            id="toastbtn-1">Show Toast 1</button>
        <button type="button" class="btn btn-danger mb-3" 
            id="ctoastbtn-1">Close Toast 1</button>
        <br>
        <button type="button" class="btn btn-success" 
            id="toastbtn-2">Show Toast 2</button>
        <button type="button" class="btn btn-danger" 
            id="ctoastbtn-2">Close 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 () {
            let toastElList = [].slice.call(
                document.querySelectorAll('#toast-1'))
            let toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
        }
        document.getElementById("toastbtn-2")
        .onclick = function () {
            let toastElList = [].slice.call(
                document.querySelectorAll('#toast-2'))
            let toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
        }
        document.getElementById("ctoastbtn-1")
        .onclick = function () {
            let toastElList = [].slice.call(
                document.querySelectorAll('#toast-1'))
            let toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.hide())
        }
        document.getElementById("ctoastbtn-2")
        .onclick = function () {
            let toastElList = [].slice.call(
                document.querySelectorAll('#toast-2'))
            let toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.hide())
        }
    </script>
</body>

</html>

Output:

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

triashabiswas

Improve

Article Tags :

Bootstrap 5 Toasts hide() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?