How can I use toasts as non-blocking form success messages site-wide?

Asked on Jul 02, 2025

1 Answer

Toasts in Bootstrap 5 are ideal for displaying non-blocking messages like form success notifications. They can be triggered globally across your site using JavaScript.

<!-- BEGIN COPY / PASTE -->
        <!-- Toast container -->
        <div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastContainer">
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <strong class="me-auto">Success</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    Your form has been submitted successfully!
                </div>
            </div>
        </div>

        <!-- JavaScript to show toast -->
        <script>
            function showToast() {
                var toastEl = document.querySelector('.toast');
                var toast = new bootstrap.Toast(toastEl);
                toast.show();
            }

            // Example: Call showToast() after form submission
            // showToast();
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

The toast container is positioned at the bottom-right of the screen using Bootstrap's utility classes.
The `showToast` function initializes and displays the toast. You can call this function after a form submission event.
Ensure Bootstrap's JavaScript is included in your project for the toast functionality to work.
Customize the toast message and position as needed.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions