Bootstrap 5 Toasts Methods

Last Updated : 23 Jul, 2024

Bootstrap 5 Toasts Methods are used to perform some specific tasks on toasts like the show, hide, etc methods. All the methods are mentioned below and described well, for brief clearance about those methods.

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.

Bootstrap 5 Toasts methods:

show(): The show() method is used to show the toast when it is triggered.
hide(): The hide() method is used to hide the toast from the display.
dispose(): The dispose() method is used to hide the toast from the display but it will remain on the DOM but will not show anymore.
getInstance(): The getInstance() method is used to allow you to get the scroll spy instance associated with a DOM element.
getOrCreateInstance(): The getOrCreateInstance() method is used to allow you to get the scroll spy instance associated with a DOM element, or create a new one if it was not initialized.

Syntax:

toast.toast_method()

Below example illustrate the Bootstrap 5 Toasts Methods:

Example 1: In this example, we will see the effect of the show() method.

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: In this example, we will see the effect of the hide() method.

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:

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

Bootstrap 5 Toasts show() Method

skyridetim

Improve

Article Tags :

Bootstrap 5 Toasts Methods

Similar Reads

Thank You!

What kind of Experience do you want to share?