Advertisement
Google Ad Slot: content-top
Bootstrap 5 Toast
In Bootstrap 5, toasts are lightweight, customizable alert messages designed for unobtrusive notifications. They are typically used for short, non-blocking messages, like "Saved successfully" or "New message received."
Basic Toast :
A basic toast includes the following structure:
Toast Header
Just now
Hello, world! This is a toast message.
Example
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Toast Header</strong>
<small class="text-body-secondary">Just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Toast Triggers:
Toasts can be triggered by buttons or other events.
Notification
Just now
This is triggered by a button click!
Example
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Notification</strong>
<small>Just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This is triggered by a button click!
</div>
</div>
<script>
document.getElementById('showToast').addEventListener('click', function () {
const toastEl = document.querySelector('.toast');
const toast = new bootstrap.Toast(toastEl);
toast.show();
});
</script>
Automatic and Manual Dismissal:
- By default, toasts dismiss themselves automatically after a delay (
autohideis true). - You can configure the delay using the
data-bs-delayattribute or in JavaScript.
Notification
This toast will disappear after 3 seconds!
Notification
This toast will disappear after 3 seconds!
Example
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary" id="autoshowToast">Automatic Dismissal after 3 second</button>
<div id="toast1" class="toast" data-bs-autohide="true" data-bs-delay="3000">
<div class="toast-header">
<strong class="me-auto">Notification</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">
This toast will disappear after 3 seconds!
</div>
</div>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-primary" id="manualshowToast">Automatic Dismissal after 5 second</button>
<div id="toast2" class="toast" data-bs-autohide="true">
<div class="toast-header">
<strong class="me-auto">Notification</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"> </button>
</div>
<div class="toast-body">
This toast will disappear after 3 seconds!
</div>
</div>
</div>
</div>
<script>
document.getElementById('autoshowToast').addEventListener('click', function () {
const toastEl = document.querySelector('#toast1');
const toast = new bootstrap.Toast(toastEl);
toast.show();
});
document.getElementById('manualshowToast').addEventListener('click', function () {
const toastEl = document.querySelector('#toast2');
const toast = new bootstrap.Toast(toastEl, { autohide: true, delay: 5000 });
toast.show();
});
</script>