Toasts are the basic push notifications sent to the user its similar to the alert box. To create a basic toast we have to use the class name "toast" inside the toast class we can also add the class "toast-header" and add the header for the toast body, the "toast-body" class can be used. We can also use attributes inside the toast class.
Bootstrap 5 Toasts Accessibility Attributes:
- aria-live: You can set the aria-live value to "assertive" for the important messages and role=" status", aria-live="polite" for the normal message.
- data-bs-delay: We can also pass the delay that specifies how much time the toast message appears for the user after the specified time the toast message disappears from the page automatically
Syntax:
<div class="toast">
<div class="toast-header">
<strong>Toast header</strong>
</div>
<div class="toast-body">
<p>toast body</p>
</div>
</div>
Example 1: In this example, we will demonstrate a basic toast message when we click a button.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Bootstrap 5 Toast Accessibility</h3>
<button class="btn btn-primary" id="toast">
toast me
</button>
<div aria-atomic="true" class="toast">
<div class="toast-header">
<strong class="me-auto">Toast header</strong>
<button type="button"
class="btn-close"
data-bs-dismiss="toast"
aria-label="Close">
</button>
</div>
<div class="toast-body">
This is a toast body.
</div>
</div>
</center>
<script>
document.getElementById("toast").onclick = function () {
var toastfunList = [].slice.call(document.querySelectorAll('.toast'))
var toastListfun = toastfunList.map(function (toastfun) {
return new bootstrap.Toast(toastfun)
})
toastListfun.forEach(toast => toast.show())
}
</script>
</body>
</html>
Output :
Example 2: In this example, we will demonstrate the delay attribute for toast messages.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Bootstrap 5 Toast Accessibility</h3>
<button class="btn btn-primary"
id="toast"
role="alert"
data-bs-delay="10000">
hello
</button>
<div aria-atomic="true" class="toast">
<div class="toast-header">
<strong class="me-auto">Toast header</strong>
<button type="button"
class="btn-close"
data-bs-dismiss="toast"
aria-label="Close">
</button>
</div>
<div class="toast-body">
This is a toast body.
</div>
</div>
</center>
<script>
document.getElementById("toast").onclick = function () {
var toastfunList = [].slice.call(document.querySelectorAll('.toast'))
var toastListfun = toastfunList.map(function (toastfun) {
return new bootstrap.Toast(toastfun)
})
toastListfun.forEach(toast => toast.show())
}
</script>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#accessibility
