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.

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

Toast success

Toast warning

Toast error with, validate.

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

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