Bootstrap 5 Toasts hide() Method

Last Updated : 17 Nov, 2022

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/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 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/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 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 () { 
            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()) 
        } 
        document.getElementById("ctoastbtn-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.hide()) 
        } 
        document.getElementById("ctoastbtn-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.hide()) 
        } 
    </script> 
</body> 
  
</html>