How can I customize the auto-dismiss timing for Bootstrap toasts while ensuring alerts remain static?

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

Post this Question & Answer:

How can I customize the auto-dismiss timing for Bootstrap toasts while ensuring alerts remain static?

Asked on Jan 10, 2026

Answer

To customize the auto-dismiss timing for Bootstrap toasts, you can use the `autohide` and `delay` options. By setting `autohide` to `true` and specifying a `delay` in milliseconds, you can control how long the toast remains visible. Alerts, on the other hand, are static by default and do not auto-dismiss unless explicitly coded to do so.

<!-- BEGIN COPY / PASTE -->
        <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>11 mins ago</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 class="alert alert-warning" role="alert">
            This is a static alert—check it out!
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `data-bs-autohide` attribute set to `true` ensures the toast will auto-dismiss.
The `data-bs-delay` attribute controls the timing, set here to 5000 milliseconds (5 seconds).
Alerts remain static and require no additional configuration to prevent auto-dismissal.
Ensure JavaScript initialization for toasts is included in your project for them to function correctly.

✅ Answered with Bootstrap 5 best practices.

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

How can I customize the auto-dismiss timing for Bootstrap toasts while ensuring alerts remain static?

Asked on Jan 10, 2026

Answer

5,000+ Real Questions. Clear Answers.