Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Toasts on Bootstrap
Basic Example
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header"><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button class="ml-2 btn-close" type="button" data-dismiss="toast" aria-label="Close"></button></div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>
Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now
    </small><button class="ml-2 btn-close" type="button" data-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"><strong class="mr-auto">Bootstrap</strong><small class="text-muted">2 seconds ago</small><button class="ml-2 btn-close" type="button" data-dismiss="toast" aria-label="Close"></button></div>
  <div class="toast-body">Heads up, toasts will stack automatically</div>
</div>
Placement

Place toasts with the helper classes as you need them. 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.

Bootstrap11 mins ago
Hello, world! This is a toast message.
<div class="position-relative" aria-live="polite" aria-atomic="true" style="min-height: 90px;">
  <div class="toast show position-absolute top-0 right-0">
    <div class="toast-header"><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button class="ml-2 btn-close" type="button" data-dismiss="toast" aria-label="Close"></button></div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

<div class="d-flex flex-center" aria-live="polite" aria-atomic="true" style="min-height: 300px;">
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header"><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button class="ml-2 btn-close" type="button" data-dismiss="toast" aria-label="Close"></button></div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>

Thank you for creating with Falcon |
2020 © Themewagon

v3.0.0-alpha10