#### Notifications

#### Bootstrap Toasts

Show Code

##### Default Toast

Use `toast` class to set a default toast.

Velzon 06 mins ago
Hello, world! This is a toast message.

##### Translucent

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

Velzon 11 mins ago
Hello, world! This is a toast message.

##### Stacking

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

Velzon Just now
See? Just like this.
Velzon 2 seconds ago
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`.

Velzon 06 mins ago
Hello, world! This is a toast message.

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

Velzon 11 mins ago
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`.

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

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>

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark