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