# Documentation v8.0.38

Preview Downloads Purchase

# Overview

Bootstrap Toast is globally initialized by `src/js/layout/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`.
Keenthemes 11 mins ago
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.
Keenthemes 11 mins ago
Hello, world! This is a toast message.

    // 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.
Keenthemes 11 mins ago
Hello, world! This is a toast message.

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

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now