Internal Site UI
Internal Site UI
  1. Home
  2. Toasts

Toasts

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 data-bs-autohide="false".
<div class="toast border show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
<div class="toast-header">
<span class="svg-icon svg-icon-2 svg-icon-primary me-3">...</span>
<h3 class="me-auto mb-0">Keenthemes</h3>
<span>11 mins ago</span>
<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.
// 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 bottom-0 end-0 p-3 z-index-3">
<div id="kt_docs_toast_toggle" class="toast border" 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>
<h3 class="me-auto mb-0">Keenthemes</h3>
<span>11 mins ago</span>
<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.
// 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 bottom-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>
<h3 class="me-auto mb-0">Keenthemes</h3>
<span>11 mins ago</span>
<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-->

Custom content

Customize your toasts by removing sub-components. Here we’ve created a simpler toast by removing the .toast-header and adding a icon.

              <div class="toast 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="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
          </div>

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

            
              <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-body">
            Hello, world! This is a toast message.
            <div class="mt-4 pt-4 border-top">
              <button type="button" class="btn btn-outline btn-outline-primary btn-active-light-primary me-2" data-bs-dismiss="toast">Close</button>
              <button type="button" class="btn btn-secondary">Take action</button>
            </div>
          </div>
        </div>

Color schemes

Building on the above example, you can create different toast color schemes with color and background utilities.

              <div class="toast align-items-center text-white bg-primary border-0" 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="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
          </div>

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.

Title

11 mins ago
Hello, world! This is a toast message.
              <form>
            <div class="mb-3">
              <label for="selectToastPlacement">Toast placement</label>
              <select class="form-select mt-2" id="selectToastPlacement">
                <option value="" selected>Select a position...</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 bd-example-toasts">
            <div class="toast-container position-absolute p-3" id="toastPlacement">
              <div class="toast">
                <div class="toast-header">
                  <img src="..." class="rounded me-2" alt="...">
                  <h3 class="me-auto mb-0">Bootstrap</h3>
                  <span>11 mins ago</span>
                </div>
                <div class="toast-body">
                  Hello, world! This is a toast message.
                </div>
              </div>
            </div>
          </div>