How do I make a Bootstrap toast auto-dismiss after 5 seconds while ensuring it remains accessible?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How do I make a Bootstrap toast auto-dismiss after 5 seconds while ensuring it remains accessible?

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:

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.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I make a Bootstrap toast auto-dismiss after 5 seconds while ensuring it remains accessible?

Asked on Nov 14, 2025

Answer

The Q&A Network