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!
Bootstrap
11 mins ago
Hello, world! This is a toast message.
<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 me-2 w-10" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body"> Hello, world! This is a toast message. </div>
</div>Coloured
Hello, world! This is a toast message.
<div class="toast show bg-primary bg-op-1 text-primary" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body fw-bold"> Hello, world! This is a toast message. </div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>Translucent
Bootstrap
11 mins ago
Hello, world! This is a toast message.
<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 me-2 img-fluid w-10" alt="Toast image">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body"> Hello, world! This is a toast message. </div>
</div>Stacking
Bootstrap
just now
See? Just like this.
Bootstrap
2 seconds ago
Heads up, toasts will stack automatically
<div class="toast-container">
<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 me-2 img-fluid w-10" alt="Toast image">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2 img-fluid w-10" alt="Toast image">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body"> Heads up, toasts will stack automatically </div>
</div>
</div>Placement
The position utilities (elements-spacers.html) to position toasts as you please.
Bootstrap
just now
See? Just like this.
Bootstrap
2 seconds ago
Heads up, toasts will stack automatically
<div aria-live="polite" aria-atomic="true" class="position-relative bg-dark p-4" style="min-height: 300px">
<!-- Position it -->
<div class="toast-container position-absolute top-0 end-0 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 me-2 img-fluid w-10" alt="Toast image">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2 img-fluid w-10" alt="Toast image">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body"> Heads up, toasts will stack automatically </div>
</div>
</div>
</div>