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.
<!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
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.
<!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>
Output:
\Reference: https://getbootstrap.com/docs/5.0/components/toasts/#options