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:
✅ Answered with Bootstrap 5 best practices.- 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.
Recommended Links: