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.


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


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

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.

Jquery Toast
Info Example
Warning Example
Success Example
Danger Example
The text can be an array
Put some HTML in the text
Making them sticky
Fade transitions
Slide up and down transitions
Simple show from and hide to corner transition