Elements:Toasts
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.
NOTE: Toasts are opt-in for performance reasons, so you must initialize them yourself. Full Javascript/toggle functionality will be added as part of the AppStrap Admin Theme coming very soon!
View code example<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/index-app/avatar.jpg" class="rounded mr-2 img-fluid w-10" alt="Toast image" />
<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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Translucent
View code example<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/index-app/avatar.jpg" class="rounded mr-2 img-fluid w-10" alt="Toast image" />
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">11 mins 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, world! This is a toast message.
</div>
</div> Hello, world! This is a toast message.
Stacking
View code example<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/index-app/avatar.jpg" class="rounded mr-2 img-fluid w-10" alt="Toast image" />
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</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">
See? Just like this.
</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/index-app/avatar.jpg" class="rounded mr-2 img-fluid w-10" alt="Toast image" />
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">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">
Heads up, toasts will stack automatically
</div>
</div> See? Just like this.
Bootstrap
2 seconds ago
Heads up, toasts will stack automatically
Placement
The position utilities (elements-spacers.html) to position toasts as you please.
View code example<div aria-live="polite" aria-atomic="true" class="pos-relative bg-dark p-4" style="min-height: 300px">
<!-- Position it -->
<div class="pos-absolute pos-t pos-r m-3">
<!-- Then put toasts within -->
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/index-app/avatar.jpg" class="rounded mr-2 img-fluid w-10" alt="Toast image" />
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</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">
See? Just like this.
</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/index-app/avatar.jpg" class="rounded mr-2 img-fluid w-10" alt="Toast image" />
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">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">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div> See? Just like this.
Bootstrap
2 seconds ago
Heads up, toasts will stack automatically
JavaScript behavior
Basic useage:
$('.toast').toast(option);
Options:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-
, as in
data-animation=""
.
| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | true | Apply a CSS fade transition to the toast |
| autohide | boolean | true | Auto hide the toast |
| delay | number |
500
|
Delay hiding the toast (ms) |