Bootstrap Toast

Toasts are lightweight, highly-customizable notifications designed to mimic the push notifications generated by mobile operating systems. They are built with flexbox, meaning they easily align and stack perfectly without messing up your page flow.

Basic Structure

Toasts are as flexible as you need them to be. A core toast is divided into a .toast-header and a .toast-body. The header usually contains an icon, title string, time, and a close button.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <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>

Live Trigger (Initializing via JS)

Because toasts are opt-in for performance, you must initialize them yourself before attempting to trigger them. Usually, toasts are triggered by user actions (like clicking a submit button on a form). You can easily instantiate a toast using vanilla JavaScript: new bootstrap.Toast(element).

<!-- Trigger Button -->
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<!-- Toast Wrapper Positioned at Bottom Right -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Bootstrap</strong>
            <small>Just now</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Interactive live toast popup!
        </div>
    </div>
</div>
...

<!-- JavaScript required to actually show the toast -->
<script>
    document.getElementById('liveToastBtn').addEventListener('click', function () {
        var toastLiveExample = document.getElementById('liveToast');
        var toast = new bootstrap.Toast(toastLiveExample);
        toast.show();
    });
</script>

Placement and Wrapping Containers

To safely position toasts, Bootstrap 5 provides a specialized .toast-container class. It acts as an absolute or fixed positioned box that neatly manages your toast elements in case multiple trigger at once, stacking them securely.

<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Notification</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Centered toast using flexbox utilities.
        </div>
    </div>
</div>