toasts

Overview

Bootstrap Toast is globally initialized by src/js/components/app.js wrapper script via .toast CSS class. For more info, please visit Bootstrap's official documentation.

Basic

Use .toast CSS 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.

html

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <i class="ki-duotone ki-abstract-39 fs-2 text-primary me-3"><span class="path1"></span><span class="path2"></span></i>
        <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.

javascript

// 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();
});

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.

javascript

// 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();
});