Toast Basic

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.
Toast Live example

Click the button the below to show as toast (positioning with our utilities in the lower right corner) that has been hidden by default with `.hide`.

Bootstrap 11 mins ago
Hello, world! This is a toast message.
Toast Translucent

Toasts are slightly translucent, too, so they blend over whatever they might appear over.

Bootstrap 11 mins ago
Hello, world! This is a toast message.
Toast Stacking

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

Bootstrap just now
See? Just like this.
Bootstrap 2 seconds ago
Heads up, toasts will stack automatically
Toast Custom content

Customize your toasts by removing sub-components, tweaking with utilities, or adding your own markup. Here we’ve created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from CoreUI Icons, and using some flexbox utilities to adjust the layout.

Hello, world! This is a toast message.

Alternatively, you can also add additional controls and components to toasts.

Hello, world! This is a toast message.
Toast Color schemes

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-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.

Hello, world! This is a toast message.