Bootstrap 5 Toasts Options

Last Updated : 30 Jul, 2024

Bootstrap 5 Toasts Options available a few features like enable/disable, auto-hide, etc. A toast is used to create something like an alert box that is only shown for a couple of seconds when something happens. When the user clicks on a button, submits a form, etc. then a lightweight and easily customizable alert message is shown for a few seconds.

Bootstrap 5 Toasts Options Attributes:

data-bs-animation: This boolean attribute is used to enable/disable the CSS fade animation to the toast.
data-bs-autohide: This attribute is used to tell whether the toast will hide automatically after a definite time.
data-bs-delay: This attribute is used to delay in milliseconds after which the toasts will be hidden automatically.

Syntax:

<div class="toast" data-bs-autohide="false">
    <div class="toast-header">
       ...
    </div>
    <div class="toast-body">
      ...
    </div>
</div>

Example 1. In this example, we set the animation option to false to disable the in-and-out animation of 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">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
  </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
  </script>

</head>

<body>
    <div class="container">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h2>Bootstrap 5 Toasts Options</h2>

        <div>
            <button type="button" 
                       class="btn btn-success" 
                       onclick="showToast()">
                Show the Toast
            </button>

            <div id="gfg" 
                    class="toast mt-5" 
                    data-bs-animation="false">
                <div class="toast-header">
                    GeeksforGeeks.
                </div>
                <div class="toast-body">
                    Hello Geeks!
                </div>
            </div>
        </div>
    </div>

    <script>
        // Initialize the Toasts
        let myToast = new bootstrap.Toast(document.getElementById('gfg'));

        function showToast() {
            myToast.show();
        }
    </script>
</body>

</html>

Output:

Example 2. In this example, we set the autohide option to false for the first toast message, and for the second option we set the delay option to 1 second By default, the delay option is set to 5 seconds.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
             rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
  </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
  </script>

</head>

<body>
    <div class="container">
        <div>
            <h1 class="text-success">GeeksforGeeks</h1>
            <h2>Bootstrap 5 Toasts Options</h2>

            <div>
                <button type="button" 
                              class="btn btn-success" 
                              onclick="showToasts()">
                    Show the Toast
                </button>

                <div id="gfg1" class="toast mt-5" 
                     role="alert" data-bs-autohide="false">
                    <div class="toast-header">
                        GeeksforGeeks.
                    </div>
                    <div class="toast-body">
                        This toast will not hide automatically.
                    </div>
                </div>


                <div id="gfg2" 
                        class="toast mt-5" 
                        data-bs-delay="1000">
                    <div class="toast-header">
                        GeeksforGeeks.
                    </div>
                    <div class="toast-body">
                        This toast will hide after 1 second.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // Initialize the Toasts
        var myToast1 = new bootstrap.Toast(document.getElementById('gfg1'));
        var myToast2 = new bootstrap.Toast(document.getElementById('gfg2'));

        function showToasts() {
            myToast1.show();
            myToast2.show();
        }
    </script>
</body>

</html>

Output:

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

Bootstrap 5 Toasts Methods

prashantrathore1159

Improve

Article Tags :

Bootstrap 5 Toasts Options

Similar Reads

Thank You!

What kind of Experience do you want to share?