On This Page

Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Example

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.

Hello, world! This is a toast message.

<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">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Translucent

Toasts are slightly translucent, too, so they blend over whatever they might appear over.

Hello, world! This is a toast message.

Stacking

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

See? Just like this.

Hello, world! This is a toast message.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">...</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">...</div>

Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle.

Hello, world! This is a toast message.

<div class="pos-absolute t-10 r-10">
  <div class="toast">...</div>
</div>

Hello, world! This is a toast message.

<div class="pos-absolute b-10 r-10">
  <div class="toast">...</div>
</div>