Bootstrap Toasts

Toast is a push notifications to your visitors with a lightweight and easily customizable alert message. Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They are built with flexbox.

Toasts are opt-in for performance reasons, so you must initialize them yourself. Toasts will automatically hide if you do not specify autohide: false.

For example,

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
 <div class="toast-header">
 <img src="/..." class="rounded mr-2" alt="...">
 <strong class="mr-auto">Bootstrap</strong>
 <small>11 mins ago</small>
 <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <div class="toast-body">
 Hello, world! This is a toast message.
 </div>
</div>