Bootstrap 5 Toast

Key Toast Features

🔹 Basic Toast Structure

Click to see a toast notification appear in the top-right corner, demonstrating typical placement for non-critical alerts. This example shows how toasts provide timely feedback—like success messages, updates, or warnings—without blocking interface interaction. Their transient nature makes them perfect for actions with delayed responses, such as form submissions, saving preferences, or background process completions, enhancing user awareness subtly.

<!-- Toast Container -->
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div class="toast" role="alert" id="myToast">
        <div class="toast-header">
            <strong class="me-auto">Bootstrap</strong>
            <small>Just now</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            Hello! This is a toast message.
        </div>
    </div>
</div>

<!-- Button to Show Toast -->
<button type="button" class="btn btn-primary" onclick="showToast()">
    Show Toast
</button>

<script>
function showToast() {
    var toastEl = document.getElementById('myToast');
    var toast = new bootstrap.Toast(toastEl);
    toast.show();
}
</script>

🔹 Colored Toasts

Use Bootstrap’s contextual color classes to create toasts for different message types: success (green), warning (yellow), danger (red), info (blue). Color-coded toasts help users instantly recognize notification severity or purpose, improving communication efficiency. This visual differentiation is crucial in applications with varied alert types, ensuring users can quickly prioritize responses and understand system feedback without reading detailed text first.

<!-- Success Toast -->
<div class="toast align-items-center text-bg-success" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            Successfully saved!
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

<!-- Danger Toast -->
<div class="toast align-items-center text-bg-danger" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            Error occurred!
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

<!-- Warning Toast -->
<div class="toast align-items-center text-bg-warning" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            Warning message!
        </div>
        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

🔹 Toast Positioning

Toasts appear in different screen positions to demonstrate flexible placement options for various notification priorities. Top-right is typical for passive alerts; bottom-center may suit confirmations; top-center works for high-priority messages. This flexibility allows designers to align toast behavior with interaction patterns, ensuring notifications complement the user journey rather than disrupting it, across diverse application scenarios.

<!-- Top Right -->
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div class="toast" role="alert">
        <div class="toast-body">Top right toast</div>
    </div>
</div>

<!-- Bottom Center -->
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
    <div class="toast" role="alert">
        <div class="toast-body">Bottom center toast</div>
    </div>
</div>

<!-- Top Center -->
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3">
    <div class="toast" role="alert">
        <div class="toast-body">Top center toast</div>
    </div>
</div>

🔹 Auto-Hide Configuration

The first toast auto-hides after a delay, while the second requires manual closing, illustrating configurable persistence. This demonstrates how to tailor toast behavior to message urgency—transient for routine updates, persistent for critical alerts. Such customization ensures users receive appropriate attention levels for different notification types, enhancing both communication clarity and interface control.

<!-- Auto-hide after 3 seconds -->
<div class="toast" role="alert" data-bs-autohide="true" data-bs-delay="3000">
    <div class="toast-body">
        This will disappear in 3 seconds
    </div>
</div>

<!-- Never auto-hide -->
<div class="toast" role="alert" data-bs-autohide="false">
    <div class="toast-body">
        This stays until manually closed
    </div>
</div>

🔹 Stacking Multiple Toasts

Multiple toasts stack vertically in the container, demonstrating organized management of concurrent notifications. Vertical stacking maintains chronological order and prevents visual chaos, allowing users to process multiple messages efficiently. This pattern supports complex workflows where several background processes might complete at once, providing clear, grouped feedback that enhances situational awareness and task management.

<div class="toast-container position-fixed top-0 end-0 p-3">
    <!-- First Toast -->
    <div class="toast" role="alert">
        <div class="toast-header">
            <strong>Notification 1</strong>
        </div>
        <div class="toast-body">First message</div>
    </div>
    
    <!-- Second Toast -->
    <div class="toast" role="alert">
        <div class="toast-header">
            <strong>Notification 2</strong>
        </div>
        <div class="toast-body">Second message</div>
    </div>
</div>