No results for " "
Make sure that all words are spelled correctly.
Start typing to search for
Products, orders, customers, actions, etc.
Notifications
Mark All as Read
See all 15 notifications

Toasts

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

Basic Example #

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex , allowing easy alignment of content thanks to our margin and flexbox utilities.

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.

Example
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="" class="rounded me-3" width="20" height="20" alt="" />
        <div class="me-auto fw-medium">Bootstrap</div>
        <small class="text-muted">11 mins ago</small
        ><button
            type="button"
            class="sa-close mt-n2 mb-n2 me-n3 ms-2"
            data-bs-dismiss="toast"
            aria-label="Close"
        ></button>
    </div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
</div>

Live #

Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with .hide .

Example
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div
    class="toast fade hide"
    data-bs-autohide="false"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    id="liveToast"
>
    <div class="toast-header">
        <img src="" class="rounded me-3" width="20" height="20" alt="" />
        <div class="me-auto fw-medium">Bootstrap</div>
        <small class="text-muted">11 mins ago</small
        ><button
            type="button"
            class="sa-close mt-n2 mb-n2 me-n3 ms-2"
            data-bs-dismiss="toast"
            aria-label="Close"
        ></button>
    </div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
</div>

Stacking #

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

Example
<div class="toast-container">
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="" class="rounded me-3" width="20" height="20" alt="" />
            <div class="me-auto fw-medium">Bootstrap</div>
            <small class="text-muted">11 mins ago</small
            ><button
                type="button"
                class="sa-close mt-n2 mb-n2 me-n3 ms-2"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="" class="rounded me-3" width="20" height="20" alt="" />
            <div class="me-auto fw-medium">Bootstrap</div>
            <small class="text-muted">11 mins ago</small
            ><button
                type="button"
                class="sa-close mt-n2 mb-n2 me-n3 ms-2"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
</div>

Custom content #

Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup. Here we've created a simpler toast by removing the default .toast-header , adding a custom hide button, and using some flexbox utilities to adjust the layout.

Example
<div
    class="toast fade show align-items-center"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
>
    <div class="d-flex">
        <div class="toast-body">Hello, world! This is a toast message.</div>
        <button
            type="button"
            class="sa-close m-2 ms-auto"
            data-bs-dismiss="toast"
            aria-label="Close"
        ></button>
    </div>
</div>

Alternatively, you can also add additional controls and components to toasts.

Example
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-body">
        <div class="pb-2">Hello, world! This is a toast message.</div>
        <div class="mt-3 pt-4 border-top">
            <button type="button" class="btn btn-primary btn-sm">Take action</button
            ><button
                type="button"
                class="btn btn-secondary btn-sm ms-3"
                data-bs-dismiss="toast"
            >
                Close
            </button>
        </div>
    </div>
</div>

Color schemes #

There are a total of eight color options available. Choose a color that matches the context of the toast.

Example
<div class="toast-container">
    <div
        class="toast toast-sa-success fade show"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
    >
        <div class="toast-header">
            <img src="" class="rounded me-3" width="20" height="20" alt="" />
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small
            ><button
                type="button"
                class="sa-close mt-n2 mb-n2 me-n3 ms-2"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
    <div
        class="toast toast-sa-danger fade show"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
    >
        <div class="toast-header">
            <img src="" class="rounded me-3" width="20" height="20" alt="" />
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small
            ><button
                type="button"
                class="sa-close mt-n2 mb-n2 me-n3 ms-2"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
    <div
        class="toast toast-sa-warning fade show"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
    >
        <div class="toast-header">
            <img src="" class="rounded me-3" width="20" height="20" alt="" />
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small
            ><button
                type="button"
                class="sa-close mt-n2 mb-n2 me-n3 ms-2"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
    <div
        class="toast toast-sa-info fade show"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
    >
        <div class="toast-header">
            <img src="" class="rounded me-3" width="20" height="20" alt="" />
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small
            ><button
                type="button"
                class="sa-close mt-n2 mb-n2 me-n3 ms-2"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
    <div
        class="toast toast-sa-primary fade show"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
    >
        <div class="toast-header">
            <img src="" class="rounded me-3" width="20" height="20" alt="" />
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small
            ><button
                type="button"
                class="sa-close mt-n2 mb-n2 me-n3 ms-2"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
    <div
        class="toast toast-sa-secondary fade show"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
    >
        <div class="toast-header">
            <img src="" class="rounded me-3" width="20" height="20" alt="" />
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small
            ><button
                type="button"
                class="sa-close mt-n2 mb-n2 me-n3 ms-2"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
    <div
        class="toast toast-sa-light fade show"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
    >
        <div class="toast-header">
            <img src="" class="rounded me-3" width="20" height="20" alt="" />
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small
            ><button
                type="button"
                class="sa-close mt-n2 mb-n2 me-n3 ms-2"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
    <div
        class="toast toast-sa-dark fade show"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
    >
        <div class="toast-header">
            <img src="" class="rounded me-3" width="20" height="20" alt="" />
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small
            ><button
                type="button"
                class="sa-close mt-n2 mb-n2 me-n3 ms-2"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
</div>

Placement #

Place toasts with custom CSS as you need them. The bottom right is often used for notifications, as is the bottom middle.

Example
<form>
    <div class="mb-4">
        <label for="selectToastPlacement">Toast placement</label
        ><select class="form-select mt-3" 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="bg-dark position-relative rounded-1 h-20x"
>
    <div class="toast-container position-absolute p-4" id="toastPlacement">
        <div
            class="toast fade show"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
        >
            <div class="toast-header">
                <img src="" class="rounded me-3" width="20" height="20" alt="" />
                <div class="me-auto fw-medium">Bootstrap</div>
                <small class="text-muted">11 mins ago</small>
            </div>
            <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>
    </div>
</div>
Stroyka Admin — eCommerce Dashboard Template © 2021
Powered by HTML — Design by Kos