How do I customize the animation duration for Bootstrap toasts?

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

Post this Question & Answer:

How do I customize the animation duration for Bootstrap toasts?

Asked on Oct 23, 2025

Answer

To customize the animation duration for Bootstrap toasts, you can override the default CSS variables that control the transition timings. This involves setting custom values for `--bs-toast-transition-duration` and `--bs-toast-fade-duration`.

<!-- BEGIN COPY / PASTE -->
        <style>
            .toast {
                --bs-toast-transition-duration: 1.5s; /* Customize the transition duration */
                --bs-toast-fade-duration: 1.5s; /* Customize the fade duration */
            }
        </style>

        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Bootstrap</strong>
                <small class="text-muted">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>
        <!-- END COPY / PASTE -->

Additional Comment:

The `--bs-toast-transition-duration` and `--bs-toast-fade-duration` CSS variables allow you to control the duration of the toast's show and hide animations.
You can adjust the values (e.g., `1.5s`) to your preferred duration.
Ensure that the custom styles are applied after the Bootstrap CSS to override the defaults.

✅ Answered with Bootstrap 5 best practices.

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

How do I customize the animation duration for Bootstrap toasts?

Asked on Oct 23, 2025

Answer

The Q&A Network