How do I show a toast in the bottom-right and auto-hide after 5 seconds?

Asked on Jul 01, 2025

1 Answer

To display a toast in the bottom-right corner and have it auto-hide after 5 seconds, you can use Bootstrap's toast component with specific positioning and options.

<!-- 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-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, world! This is a toast message.
                </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 toast is positioned using Bootstrap's utility classes for fixed positioning (`position-fixed`, `bottom-0`, `end-0`).
The `data-bs-delay="5000"` attribute sets the auto-hide delay to 5 seconds (5000 milliseconds).
The script initializes and shows all toasts on the page.
Ensure that Bootstrap's JavaScript is included in your project for the toast functionality to work.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions