Bootstrap - Toasts Part 5: Dismissing Toasts

Toasts can be dismissed manually or automatically after a set time.

Examples and Explanation

Auto-Hide Toast

<div class="toast" data-bs-delay="3000">

    <div class="toast-body">This toast auto-hides after 3 seconds.</div>

</div>

Explanation: The data-bs-delay attribute specifies the delay time before auto-hiding.

Manual Dismissal

<div class="toast">

    <div class="toast-header">

        <strong class="me-auto">Manual Dismiss</strong>

        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>

    </div>

    <div class="toast-body">Click the close button to dismiss this toast.</div>

</div>

Explanation: Users can dismiss the toast manually using the close button.

JavaScript Dismissal

<div class="toast" id="dismissToast">

    <div class="toast-body">This toast will be dismissed via JavaScript.</div>

</div>

<script>

    const dismissToastEl = document.getElementById('dismissToast');

    const dismissToast = new bootstrap.Toast(dismissToastEl);

    setTimeout(() => dismissToast.hide(), 5000);

</script>

Explanation: JavaScript dismissal adds flexibility for dynamic toast management.

Conclusion

Bootstrap 5 Toasts are an elegant solution for user notifications. By mastering their structure, positioning, activation methods, customization options, and dismissal techniques, you can integrate powerful and visually appealing feedback systems into your web applications.