How do I make a Bootstrap toast auto-dismiss after 5 seconds while ensuring it remains accessible? Pending Review
Asked on Nov 14, 2025
Answer
To create an auto-dismissable Bootstrap toast that remains accessible, you can use the `autohide` attribute and set the `delay` option. This ensures the toast will automatically disappear after a specified time while still being accessible to screen readers.
<!-- BEGIN COPY / PASTE -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-delay="5000">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>Just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, this is a toast message that will auto-dismiss after 5 seconds.
</div>
</div>
</div>
<script>
var toastElList = [].slice.call(document.querySelectorAll('.toast'));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl);
});
toastList.forEach(toast => toast.show());
</script>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `data-bs-autohide="true"` attribute ensures the toast will automatically hide.
- The `data-bs-delay="5000"` attribute sets the delay to 5000 milliseconds (5 seconds).
- The `aria-live="assertive"` and `aria-atomic="true"` attributes make the toast accessible by notifying screen readers immediately.
- The JavaScript initializes and shows the toast when the page loads.
- Ensure you have included Bootstrap's CSS and JS files in your project for this to work.
Recommended Links: