Live Preview

Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Bootstrap documentation →

Example

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <!-- Avatar -->
        <div class="avatar avatar-xs me-4">
            <span class="avatar-text bg-success">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
            </span>
        </div>

        <h6 class="me-auto">Password changed</h6>
        <small class="text-muted">11 mins ago</small>

        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Your password has been updated successfully.
    </div>
</div>