Notifications

  1. Base UI
  2. Notifications

Bootstrap Toasts

Default Toast

Use toast class to set a default toast.

Translucent

Toasts are slightly translucent, too, so they blend over whatever they might appear over.

Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically. 

<!-- Default Toast --> 
<div class="toast fade show" role="alert" aria-live="assertive"
    data-bs-autohide="false" aria-atomic="true">
    <div class="toast-header">
        <img src="assets/images/logo-sm.png" class="rounded me-2"
            alt="..." height="20">
        <span class="fw-semibold me-auto">Velzon</span>
        <small>06 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>

<!-- Translucent Toast --> 
<div class="p-3 bg-light">
    <div class="toast fade show" role="alert" aria-live="assertive"
        data-bs-autohide="false" aria-atomic="true">
        <div class="toast-header">
            <img src="assets/images/logo-sm.png" class="rounded me-2"
                alt="..." height="20">
            <span class="fw-semibold me-auto">Velzon</span>
            <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>

<!-- Stacking Toast --> 
<div class="toast fade show" role="alert" aria-live="assertive"
    data-bs-autohide="false" aria-atomic="true">
    <div class="toast-header">
        <img src="assets/images/logo-sm.png" class="rounded me-2"
            alt="..." height="20">
        <span class="fw-semibold me-auto">Velzon</span>
        <small>Just now</small>
        <button type="button" class="btn-close"
            data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        See? Just like this.
    </div>
</div>

<!-- Placement Toast --> 
<div class="bg-light" aria-live="polite" aria-atomic="true"
    style="position: relative; min-height: 200px;">
    <div class="toast fade show" role="alert" aria-live="assertive"
        aria-atomic="true" data-bs-toggle="toast"
        style="position: absolute; top: 16px; right: 16px;">
        <div class="toast-header">
            <img src="assets/images/logo-sm.png"
                class="rounded me-2" alt="..." height="20">
            <span class="fw-semibold me-auto">Velzon</span>
            <small>06 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>

 <!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true"
    class="bg-light d-flex justify-content-center align-items-center"
    style="height: 200px;">
    <div class="toast fade show" role="alert" aria-live="assertive"
        data-bs-autohide="false" aria-atomic="true">
        <div class="toast-header">
            <img src="assets/images/logo-sm.png"
                class="rounded me-2" alt="..." height="20">
            <span class="fw-semibold me-auto">Velzon</span>
            <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>

Toast Placement

Various example of toast placement.

... Velzon 11 mins ago
Hello, world! This is a toast message. 
<!-- Toast placement -->
<form>
    <div class="mb-3">
        <select class="form-select mt-2" id="selectToastPlacement">
            <option value="" selected>Select a position...</option>
            <option value="top-0 start-0">Top left</option>
            <option value="top-0 start-50 translate-middle-x">Top center</option>
            <option value="top-0 end-0">Top right</option>
            <option value="top-50 start-0 translate-middle-y">Middle left</option>
            <option value="top-50 start-50 translate-middle">Middle center</option>
            <option value="top-50 end-0 translate-middle-y">Middle right</option>
            <option value="bottom-0 start-0">Bottom left</option>
            <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
            <option value="bottom-0 end-0">Bottom right</option>
        </select>
    </div>
</form>

<div aria-live="polite" aria-atomic="true" class="bd-example bg-light position-relative" style="height: 300px;">
    <div class="toast-container position-absolute p-3" id="toastPlacement">
        <div class="toast">
            <div class="toast-header">
                <img src="assets/images/logo-sm.png" class="rounded me-2"
                    alt="..." height="20">
                <strong class="me-auto">Velzon</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>
</div>

Bordered with Icon Toast

Use toast-border- with below-mentioned color variation to set a toast with border and icon.

<!-- Bordered With Icon Toast -->
<div class="hstack flex-wrap gap-2">
    <button type="button" class="btn btn-primary" id="borderedToast1Btn">Primary toast</button>
    <button type="button" class="btn btn-success" id="borderedToast2Btn">Success toast</button>
    <button type="button" class="btn btn-warning" id="borderedTost3Btn">Warning toast</button>
    <button type="button" class="btn btn-danger" id="borderedToast4Btn">danger toast</button>
</div>

<div style="z-index: 11">
    <div id="borderedToast1" class="toast toast-border-primary overflow-hidden mt-3" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0 me-2">
                    <i class="ri-user-smile-line align-middle"></i>
                </div>
                <div class="flex-grow-1">
                    <h6 class="mb-0">Your application was successfully sent.</h6>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="z-index: 11">
    <div id="borderedToast2" class="toast toast-border-success overflow-hidden mt-3" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0 me-2">
                    <i class="ri-checkbox-circle-fill align-middle"></i>
                </div>
                <div class="flex-grow-1">
                    <h6 class="mb-0">Yey! Everything worked!</h6>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="z-index: 11">
    <div id="borderedTost3" class="toast toast-border-warning overflow-hidden mt-3" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0 me-2">
                    <i class="ri-notification-off-line align-middle"></i>
                </div>
                <div class="flex-grow-1">
                    <h6 class="mb-0">Something went wrong, try again.</h6>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="z-index: 11">
    <div id="borderedToast4" class="toast toast-border-danger overflow-hidden mt-3" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0 me-2">
                    <i class="ri-alert-line align-middle"></i>
                </div>
                <div class="flex-grow-1">
                    <h6 class="mb-0">Something is very wrong!  <a href="javascript:void(0);" class="text-decoration-underline">See detailed report.</a></h6>
                </div>
            </div>
        </div>
    </div>
</div>

Toastify JS

Use data-toast data-toast-text="" data-toast-gravity="" data-toast-position="" data-toast-className="" data-toast-duration="" data-toast-close="close" data-toast-style="style" as per your toast requirement.

Display Position
Offset Position
Close icon Display
Duration
<!-- Toast -->
    <div class="hstack flex-wrap gap-2">
    <button type="button" data-toast data-toast-text="Welcome Back! This is a Toast Notification" data-toast-gravity="top" data-toast-position="right" data-toast-className="primary" data-toast-duration="3000" data-toast-close="close" data-toast-style="style" class="btn btn-light w-xs ">Default</button>
    <button type="button" data-toast data-toast-text="Your application was successfully sent" data-toast-gravity="top" data-toast-position="center" data-toast-className="success" data-toast-duration="3000" class="btn btn-light w-xs">Success</button>
    <button type="button" data-toast data-toast-text="Warning ! Something went wrong try again" data-toast-gravity="top" data-toast-position="center" data-toast-className="warning" data-toast-duration="3000" class="btn btn-light w-xs">Warning</button>
    <button type="button" data-toast data-toast-text="Error ! An error occurred." data-toast-gravity="top" data-toast-position="center" data-toast-className="danger" data-toast-duration="3000" class="btn btn-light w-xs">Error</button>
</div>

<!-- Display Position -->
<div class="hstack flex-wrap gap-2">
    <button type="button" data-toast data-toast-text="Welcome Back ! This is a Toast Notification" data-toast-gravity="top" data-toast-position="left" data-toast-duration="3000" data-toast-close="close" class="btn btn-light w-xs">Top Left</button>
    <button type="button" data-toast data-toast-text="Welcome Back ! This is a Toast Notification" data-toast-gravity="top" data-toast-position="center" data-toast-duration="3000" data-toast-close="close" class="btn btn-light w-xs">Top Center</button>
    <button type="button" data-toast data-toast-text="Welcome Back ! This is a Toast Notification" data-toast-gravity="top" data-toast-position="right" data-toast-duration="3000" data-toast-close="close"  class="btn btn-light w-xs">Top Right</button>
    <button type="button" data-toast data-toast-text="Welcome Back ! This is a Toast Notification" data-toast-gravity="bottom" data-toast-position="left" data-toast-duration="3000" data-toast-close="close" class="btn btn-light w-xs">Bottom Left</button>
    <button type="button" data-toast data-toast-text="Welcome Back ! This is a Toast Notification" data-toast-gravity="bottom" data-toast-position="center" data-toast-duration="3000" data-toast-close="close" class="btn btn-light w-xs">Bottom Center</button>
    <button type="button" data-toast data-toast-text="Welcome Back ! This is a Toast Notification" data-toast-gravity="bottom" data-toast-position="right" data-toast-duration="3000" data-toast-close="close" class="btn btn-light w-xs">Bottom Right</button>
</div>

<!-- Offset Position -->
<button type="button" data-toast data-toast-text="Welcome Back ! This is a Toast Notification" data-toast-gravity="top" data-toast-position="right" data-toast-duration="3000" data-toast-offset data-toast-close="close" class="btn btn-light w-xs">Click Me</button>;

<!-- Close icon Display -->
<button type="button" data-toast data-toast-text="Welcome Back ! This is a Toast Notification" data-toast-position="right" data-toast-duration="3000" data-toast-close="close" class="btn btn-light w-xs">Click Me</button>

<!-- Duration -->
<button type="button" data-toast data-toast-text="Toast Duration 5s" data-toast-gravity="top" data-toast-position="right" data-toast-duration="5000" class="btn btn-light w-xs">Click Me</button>