Bootstrap 5 Toasts Options

Last Updated : 25 Nov, 2022

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/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
             rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"> 
  </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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 
        var myToast = new bootstrap.Toast(document.getElementById('gfg')); 
  
        function showToast() { 
            myToast.show(); 
        } 
    </script> 
</body> 
  
</html>

Output:

Bootstrap 5 Toasts Options

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/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
             rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"> 
  </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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>