Bootstrap5 Toasts
Bootstrap5 Toasts is a lightweight notification component used to display temporary information, notifications, or alerts in the corners or at the bottom of a page.
Toasts are typically used to display short-term messages to users, such as success messages, error messages, warnings, or other notifications.
Toasts can be displayed in different positions on the page, including top-left, top-right, bottom-left, bottom-right, and bottom-center.
How to create toasts
To create a toast, you can use the.toastclass, and add the .toast-header and .toast-body classes within it to represent the header and content.
Note:Toasts are hidden by default. You can use.show to show them. To close a toast, you can adddata-bs-dismiss="toast":
Example
<div class="toast show">
<div class="toast-header">Toast header<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">This is a Bootstrap 5 toast example.</div>
</div>
To display a toast by clicking a button, you need to initialize it with JavaScript: get the click event of the specified element by ID and call thetoast()method.
When the button is clicked, the following code will display alltoastclasses on the page:
Example
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
Display the toast in the bottom-right corner:
Example
<div class="container mt-5">
<button class="btn btn-primary" onclick="showToast()">Show toast</button>
</div>
<div class="position-fixed bottom-0 end-0 p-3">
<div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap Toast</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">This is a Bootstrap 5 toast example.</div>
</div>
</div>
Set up multiple toasts:
Example
<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container top-0 end-0 p-3">
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
<strong class="me-auto">Toast example</strong>
<small class="text-muted">Just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">This is the second message</div>
</div>
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
<strong class="me-auto">Toast example</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">This is the first message</div>
</div>
</div>
</div>
Other extensions