Toast
Bootstrap 5 Toasts component
Responsive toast built with the latest Bootstrap 5. Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Basic example
Clicking the button below. The toast will be displayed in the bottom-left of the page.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show toast</button>
<div class="toast-container position-fixed bottom-0 start-0 p-3">
<div class="toast" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Good news, everyone</div>
<div class="toast-body">I will auto dismiss after 5 seconds.</div>
</div>
</div>Toasts are opt-in for performance reasons, so you must initialize toast yourself via js new bootstrap.Toast().
JS
const toastTrigger = document.getElementById("liveToastBtn");
const toastLiveExample = document.getElementById("liveToast");
toastTrigger.addEventListener("click", () => {
const toast = new bootstrap.Toast(toastLiveExample);
toast.show();
});
Information
Add the .toast-info to .toast will display an additional icon for information states.
<button type="button" class="btn btn-primary">Show information toast</button>
<div class="toast-container position-fixed bottom-0 start-0 p-3">
<div class="toast toast-info" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Information</div>
<div class="toast-body">I will auto dismiss after 5 seconds.</div>
</div>
</div>Warning
Add the .toast-warning to .toast will display an additional icon for warning states.
<button type="button" class="btn btn-primary">Show warning toast</button>
<div class="toast-container position-fixed bottom-0 start-0 p-3">
<div class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Success!</div>
<div class="toast-body">I will auto dismiss after 5 seconds.</div>
</div>
</div>Error
Add the .toast-danger to .toast will display an additional icon for error states.
<button type="button" class="btn btn-primary">Show error toast</button>
<div class="toast-container position-fixed bottom-0 start-0 p-3">
<div class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Error!</div>
<div class="toast-body">I will auto dismiss after 5 seconds.</div>
</div>
</div>Success
Add the .toast-success to .toast will display an additional icon for success states.
<button type="button" class="btn btn-primary">Show success toast</button>
<div class="toast-container position-fixed bottom-0 start-0 p-3">
<div class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Success!</div>
<div class="toast-body">I will auto dismiss after 5 seconds.</div>
</div>
</div>Color schemes
For fancy style? you can create different toast color schemes with our color and background utilities. Here we’ve added .text-bg-primary to the .toast, and then added .btn-close-white to our close button.
<button type="button" class="btn btn-primary">Primary toast</button>
<div class="toast-container position-fixed bottom-0 start-0 p-3">
<div class="toast text-bg-primary" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>
<button type="button" class="btn btn-secondary">Sedondary toast</button>
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
<div class="toast text-bg-secondary" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>
<button type="button" class="btn btn-warning">Warning toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast text-bg-warning" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>Toast position
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. Check out our position utilities for more information.
Top-Left
use the position-fixed, top-0 and start-0 utility classes on a .toast-container element to position Toasts at the top left of the viewport.
<button type="button" class="btn btn-primary">Top Left</button>
<div class="toast-container position-fixed top-0 start-0 p-3">
<div class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Toast!</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>Top-Center
use the position-fixed, top-0, start-50 and translate-middle-x utility classes on a .toast-container element to position Toasts at the top center of the viewport.
<button type="button" class="btn btn-primary">Top Center</button>
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3">
<div class="toast toast-info" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Toast!</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>Top-Right
use the position-fixed, top-0, end-0 utility classes on a .toast-container element to position Toasts at the top right of the viewport.
<button type="button" class="btn btn-primary">Top Right</button>
<div class="toast-container position-fixed top-0 end-0 p-3">
<div class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Toast!</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>Bottom-Left
use the position-fixed, bottom-0, and start-0 utility classes on a .toast-container element to position Toasts at the bottom left of the viewport.
<button type="button" class="btn btn-primary">Bottom Left</button>
<div class="toast-container position-fixed bottom-0 start-0 p-3">
<div class="toast toast-info" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Toast!</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>Bottom-Center
use the position-fixed, bottom-0, start-50 and translate-middle-x utility classes on a .toast-container element to position Toasts at the bottom left of the viewport.
<button type="button" class="btn btn-primary">Bottom Center</button>
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
<div class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Toast!</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>Bottom-Right
use the position-fixed, bottom-0, and end-0 utility classes on a .toast-container element to position Toasts at the bottom left of the viewport.
<button type="button" class="btn btn-primary">Bottom Right</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Toast!</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>Middle-Left
use the position-fixed, top-50, start-0 and translate-middle-y utility classes on a .toast-container element to position Toasts at the middle left of the viewport.
<button type="button" class="btn btn-primary">Middle Left</button>
<div class="toast-container position-fixed top-50 start-0 translate-middle-y p-3">
<div class="toast toast-info" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Toast!</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>Middle-Right
use the position-fixed, top-50, end-0 and translate-middle-y utility classes on a .toast-container element to position Toasts at the middle right of the viewport.
<button type="button" class="btn btn-primary">Middle Right</button>
<div class="toast-container position-fixed top-50 end-0 translate-middle-y p-3">
<div class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">Toast!</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>Stack toasts
You can stack toasts by wrapping them in a toast container with toast-container, which will vertically add some spacing.
<button type="button" class="btn btn-primary">Show next toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast toast-info" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">#1 Backup stale</div>
<div class="toast-body">Toast message goes here.</div>
</div>
<div class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">#2 Success!</div>
<div class="toast-body">Heads up, toasts will stack automatically.</div>
</div>
<div class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">#3 Destructive operation!</div>
<div class="toast-body">See? Just like this.</div>
</div>
<div class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-header">#4 Warning!</div>
<div class="toast-body">Warning message goes here.</div>
</div>
</div>Custom toast
Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup. Here we’ve created a simpler toast by removing the default .toast-header, adding a link to allow users to take actions.
<button type="button" class="btn btn-primary">Show toast</button>
<div class="toast-container position-static mt-3">
<div class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true">
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-body">
Issue START-42 was created successfully
<div class="mt-2">
<a href="#">View issue</a>
<a class="ms-2" href="#">Add to next sprint</a>
</div>
</div>
</div>
</div>Accessibility
Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an aria-live region. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include aria-atomic="true" to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the alert component instead of toast.
Note that the live region needs to be present in the markup before the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
You also need to adapt the role and aria-live level depending on the content. If it’s an important message like an error, use role="alert" aria-live="assertive", otherwise use role="status" aria-live="polite" attributes.
As the content you’re displaying changes, be sure to update the delay timeout so that users have enough time to read the toast.
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
When using autohide: false, you must add a close button to allow users to dismiss the toast.
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-autohide="false">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
While technically it’s possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long delay timeout, keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don’t receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with autohide: false.
Usage
Initialize
Initialize toasts via JavaScript:
const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))
Dismiss button
Dismissal can be achieved with the data attribute on a button within the toast as demonstrated below:
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
or on a button outside the toast using the data-bs-target as demonstrated below:
<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>
Options
As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".
As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.
| Name | Type | Default | Description |
|---|---|---|---|
animation | boolean | true | Apply a CSS fade transition to the toast |
autohide | boolean | true | Automatically hide the toast after the delay |
delay | number | 5000 | Delay in milliseconds before hiding the toast |
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
| Method | Description |
|---|---|
dispose | Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore. |
getInstance | Static method which allows you to get the toast instance associated with a DOM element. For example: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl) Returns a Bootstrap toast instance |
getOrCreateInstance | Static method which allows you to get the toast instance associated with a DOM element, or create a new one, in case it wasn’t initialized.const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) Returns a Bootstrap toast instance |
hide | Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false. |
isShown | Returns a boolean according to toast’s visibility state. |
show | Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show. |
Events
| Event | Description |
|---|---|
hide.bs.toast | This event is fired immediately when the hide instance method has been called. |
hidden.bs.toast | This event is fired when the toast has finished being hidden from the user. |
show.bs.toast | This event fires immediately when the show instance method is called. |
shown.bs.toast | This event is fired when the toast has been made visible to the user. |
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
// do something...
})