Bootstrap 5 Toasts Options
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= rel="stylesheet"> <script src= </script> <script src= </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= rel="stylesheet"> <script src= </script> <script src= </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:
Bootstrap 5 Toasts Options
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#options
Please Login to comment...