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.
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.
// 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-->
2022©
Keenthemes
