Notifications

Bootstrap Toasts

Show Code

Default Toast

Use toast class to set a default toast.

Hello, world! This is a toast message.

Translucent

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

Hello, world! This is a toast message.

Stacking

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

See? Just like this.

Heads up, toasts will stack automatically

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.

Hello, world! This is a toast message.

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

Hello, world! This is a toast message.

<!-- 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

Show Code

Various example of toast placement.

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

Show Code

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

Your application was successfully sent.

Yey! Everything worked!

Something went wrong, try again.

Something is very wrong! See detailed report.

<!-- 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

Show Code

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>

Angela Bernier

David Grasso

Mike Bunch

Web Apps

My Cart

Your Cart is Empty!

Branded T-Shirts

$320

Bentwood Chair

$89

Borosil Paper Cup

$750

Gray Styled T-Shirt

$ 1250

Stillbird Helmet

$990

$1258.58

Notifications

Your Elite author Graphic Optimization reward is ready!

Angela Bernier

You have received 20 new messages in the conversation

Maureen Gibson

James Lemire

Angela Bernier

Kenneth Brown

Maureen Gibson

Notifications

Bootstrap Toasts

Default Toast

Translucent

Stacking

Placement

Toast Placement

Bordered with Icon Toast

Your application was successfully sent.

Yey! Everything worked!

Something went wrong, try again.

Something is very wrong! See detailed report.

Toastify JS

Display Position

Offset Position

Close icon Display

Duration

Theme Customizer

Layout

Vertical

Horizontal

Two Column

Color Scheme

Light

Dark

Layout Width

Fluid

Boxed

Layout Position

Topbar Color

Light

Dark

Sidebar Size

Default

Compact

Small (Icon View)

Small Hover View

Sidebar View

Default

Detached

Sidebar Color

Light

Dark

Gradient

Sidebar Images

Preloader

Enable

Disable