Documentation v8.1.1

Preview Downloads Purchase

Overview

Bootstrap Toast is globally initialized by src/js/layout/app.jswrapper script via .toastCSS class. For more info, please visit Bootstrap's official documentation.

Basic

Use .toastCSS class to initialize a toast element by passing any of available options as explained in Toast Options.

Please note that Bootstrap Toast will automatically hide if you do not specify autohide: false.

Hello, world! This is a toast message.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <span class="svg-icon svg-icon-2 svg-icon-primary me-3">...</span>
        <strong class="me-auto">Keenthemes</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>

Toggle

Here's an example of Bootstrap Toast toggling on button click. Use the Javascript below to handle the click action event.

Hello, world! This is a toast message.

JAVASCRIPT
HTML

// Select elements
const button = document.getElementById('kt_docs_toast_toggle_button');
const toastElement = document.getElementById('kt_docs_toast_toggle');

// Get toast instance --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#getinstance
const toast = bootstrap.Toast.getOrCreateInstance(toastElement);

// Handle button click
button.addEventListener('click', e => {
    e.preventDefault();

    // Toggle toast to show --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#show
    toast.show();
});

<!--begin::Button-->
<button type="button" class="btn btn-primary" id="kt_docs_toast_toggle_button">Toggle Toast</button>
<!--end::Button-->

<!--begin::Toast-->
<div class="position-fixed top-0 end-0 p-3 z-index-3">
    <div id="kt_docs_toast_toggle" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <span class="svg-icon svg-icon-2 svg-icon-primary me-3">...</span>
            <strong class="me-auto">Keenthemes</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>
<!--end::Toast-->

Dynamic Stacking

Here's an example of Bootstrap Toast stacking on top of each other on click. Use the Javascript below to handle the click action event.

Hello, world! This is a toast message.

JAVASCRIPT
HTML

// Select elements
const button = document.getElementById('kt_docs_toast_stack_button');
const container = document.getElementById('kt_docs_toast_stack_container');
const targetElement = document.querySelector('[data-kt-docs-toast="stack"]'); // Use CSS class or HTML attr to avoid duplicating ids

// Remove base element markup
targetElement.parentNode.removeChild(targetElement);

// Handle button click
button.addEventListener('click', e => {
    e.preventDefault();

    // Create new toast element
    const newToast = targetElement.cloneNode(true);
    container.append(newToast);

    // Create new toast instance --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#getorcreateinstance
    const toast = bootstrap.Toast.getOrCreateInstance(newToast);

    // Toggle toast to show --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#show
    toast.show();
});

<!--begin::Button-->
<button type="button" class="btn btn-primary" id="kt_docs_toast_stack_button">Toggle Toast</button>
<!--end::Button-->

<!--begin::Toast-->
<div id="kt_docs_toast_stack_container" class="toast-container position-fixed top-0 end-0 p-3 z-index-3">
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-kt-docs-toast="stack">
        <div class="toast-header">
            <span class="svg-icon svg-icon-2 svg-icon-primary me-3">...</span>
            <strong class="me-auto">Keenthemes</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>
<!--end::Toast-->