Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
They're built with flexbox, so they're easy to align and position.
Toasts will automatically hide if you do not specify autohide: false
.
To encourage extensible and predictable toasts, we recommend a header and body.
Toast headers use display: flex
, allowing easy alignment of content thanks to our margin and flexbox utilities.
Toasts are as flexible as you need and have very little required markup.
At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
Previously, our scripts dynamically added the hide
attribute to completely hide a toast (with display:none
, rather than just with opacity:0
). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
Toasts are slightly translucent to blend in with what's below them.
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
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 ToastHeader
component, adding a custom hide icon from Bootstrap Icons, and using some flexbox utilities
to adjust the layout.
Alternatively, you can also add additional controls and components to toasts.
Building on the above example, you can create different toast color schemes with our color
and background
utilities.
Here we've added .bg-primary
and text-color="white"
attribute to the Toast
component.
For a crisp edge, we remove the default border with border="0"
attribute.
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
component.
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
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
.