Toasts
Notifications
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.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Stacking
When you have multiple toasts, we default to vertically stacking them in a readable manner.
Bootstrap
just now
See? Just like this.
Bootstrap
2 seconds ago
Heads up, toasts will stack automatically
Custom content
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 custom hide icon from Bootstrap Icons, and using some flexbox utilities to adjust the layout.
Hello, world! This is a toast message.
Hello, world! This is a toast message.