Skip to content

Toasts

Toasts are used to show alert or information to users.

Toast Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Add a container element with the toast class. You can add any text within the container, and even icons. You may also add a close button with the btn-clear class if you need.

html
<div class="toast">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Toast success

Toast warning

Toast error

And you can add the toast-primary, toast-success, toast-warning or toast-error class for additional toast colors.

html
<div class="toast toast-primary">
  <button class="btn btn-clear float-right"></button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>