Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.
Place toasts with custom CSS absolute properties, for example top: 10; right: 10 The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.
When you have multiple toasts put into wrapping element so they can easily stack.
Initialize toasts via JavaScript:
$('.toast').toast(option)
All API methods are asynchronous and start a transition.
| Method | Example | Description |
|---|---|---|
.toast('show') |
$('#element').toast('show') |
Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show. |
.toast('hide') |
$('#element').toast('hide') |
Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false. |
.toast('dispose') |
$('#element').toast('dispose') |
Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore. |
<div class="toast toast-bootstrap show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="fa fa-newspaper-o"> </i>
<strong class="mr-auto m-l-sm">Notification</strong>
<small>2 seconds ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, you can push notifications to your visitors with this toast feature.
</div>
</div>