Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Read the Official Bootstrap Documentationfor a full list of instructions and other options.
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.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <h6 class="tx-inverse tx-14 mg-b-0 mg-r-auto">Notification</h6> <small>11 mins ago</small> <button type="button" class="ml-2 mb-1 close tx-normal" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div></div>Toasts are slightly translucent, too, so they blend over whatever they might appear over.
When you have multiple toasts, we default to vertiaclly stacking them in a readable manner.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">...</div><div class="toast" role="alert" aria-live="assertive" aria-atomic="true">...</div>Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle.
<div class="pos-absolute t-10 r-10"> <div class="toast">...</div></div><div class="pos-absolute b-10 r-10"> <div class="toast">...</div></div>