Toasts

Toasts are small, temporary notifications for saves, errors, messages and updates. Some examples here are always visible so you can see the styling; the others appear when you press their button. Containers stack several toasts neatly, and helper classes position them anywhere.

1Basic toast

A visible toast (<code>.toast.show</code>) with header, timestamp, close button and a short message.

Track your progress in the app and see how far you have come.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <span class="d-inline-block rounded me-2 bg-primary" style="width:1rem;height:1rem"></span><strong class="me-auto">Lumenan Studio</strong><small class="text-body-secondary">yesterday</small>
    <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Track your progress in the app and see how far you have come.
  </div>
</div>

2Translucent

Toasts are slightly translucent, so they blend over coloured or busy backgrounds.

We listen first, then build a plan around what you actually need.

<div class="p-4 rounded bg-primary-subtle">
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="bi bi-info-circle-fill" aria-hidden="true"></i>&nbsp;<strong class="me-auto">Heads up</strong><small class="text-body-secondary">now</small>
      <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      We listen first, then build a plan around what you actually need.
    </div>
  </div>
</div>

3Stacking

Several toasts in a <code>.toast-container</code> stack with even spacing.

Your dashboard was saved.

Heads up, Freya joined the goal.

Your trial ends in 8 days.

<div class="toast-container position-static">
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <span class="d-inline-block rounded me-2 bg-success" style="width:1rem;height:1rem"></span><strong class="me-auto">Lumenan Studio</strong><small class="text-body-secondary">just now</small>
      <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Your dashboard was saved.
    </div>
  </div>
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <span class="d-inline-block rounded me-2 bg-info" style="width:1rem;height:1rem"></span><strong class="me-auto">Lumenan Studio</strong><small class="text-body-secondary">2 seconds ago</small>
      <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, Freya joined the goal.
    </div>
  </div>
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <span class="d-inline-block rounded me-2 bg-warning" style="width:1rem;height:1rem"></span><strong class="me-auto">Lumenan Studio</strong><small class="text-body-secondary">5 seconds ago</small>
      <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Your trial ends in 8 days.
    </div>
  </div>
</div>

4Custom content

Leave out the header and put the message and close button side by side.

Hello, Maya! Welcome back.

<div class="toast show align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      <i class="bi bi-emoji-smile-fill" aria-hidden="true"></i> Hello, Maya! Welcome back.
    </div>
    <button type="button" class="me-2 m-auto btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

5With actions

Buttons below the message for a decision directly in the toast.

Finn invited you to Five stretches for desk workers.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Finn invited you to <strong>Five stretches for desk workers</strong>.
    <div class="mt-2 pt-2 border-top d-flex gap-2">
      <button type="button" class="btn btn-primary btn-sm">Accept</button>
      <button type="button" class="btn btn-secondary btn-sm" data-ui-dismiss="toast">Close</button>
    </div>
  </div>
</div>

6Color scheme

<code>.text-bg-primary .border-0</code> and a white close button for a solid coloured toast.

Beginners are always welcome, with an intro session included.

<div class="toast show align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      <i class="bi bi-bell-fill" aria-hidden="true"></i> Beginners are always welcome, with an intro session included.
    </div>
    <button type="button" class="me-2 m-auto btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

7Status variants

Success, warning and danger messages in one container.

Payment #ORD-5922 completed.

Storage is 90% full.

Could not reach the server.

<div class="toast-container position-static">
  <div class="toast show align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        <i class="bi bi-check-circle-fill" aria-hidden="true"></i> Payment #ORD-5922 completed.
      </div>
      <button type="button" class="me-2 m-auto btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
  <div class="toast show align-items-center text-bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i> Storage is 90% full.
      </div>
      <button type="button" class="me-2 m-auto btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
  <div class="toast show align-items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        <i class="bi bi-x-circle-fill" aria-hidden="true"></i> Could not reach the server.
      </div>
      <button type="button" class="me-2 m-auto btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>

8Live toast

Click the button: <code>data-demo-toast="#id"</code> shows the hidden toast, which hides itself after a few seconds.

Hello! This toast appeared on demand.

<button type="button" class="btn btn-primary" data-demo-toast="#toast-1219">Show live toast</button>
<div class="toast-container position-static mt-3">
  <div id="toast-1219" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <span class="d-inline-block rounded me-2 bg-primary" style="width:1rem;height:1rem"></span><strong class="me-auto">Lumenan Studio</strong><small class="text-body-secondary">now</small>
      <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello! This toast appeared on demand.
    </div>
  </div>
</div>

9Success on save

A green confirmation toast after a save button is pressed.

All changes saved.

<button type="button" class="btn btn-success" data-demo-toast="#toast-1220"><i class="bi bi-floppy-fill" aria-hidden="true"></i> Save changes</button>
<div class="toast-container position-static mt-3">
  <div id="toast-1220" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        <i class="bi bi-check2-circle" aria-hidden="true"></i> All changes saved.
      </div>
      <button type="button" class="me-2 m-auto btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>

10Error message

A danger toast with a header and a retry link.

The file is larger than 25 MB. Try again

<button type="button" class="btn btn-outline-danger" data-demo-toast="#toast-1221">Simulate an error</button>
<div class="toast-container position-static mt-3">
  <div id="toast-1221" class="toast border-danger" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <span class="text-danger me-2"><i class="bi bi-exclamation-octagon-fill" aria-hidden="true"></i></span><strong class="me-auto">Upload failed</strong>
      <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      The file is larger than 25 MB. <a href="#" class="link-danger">Try again</a>
    </div>
  </div>
</div>

11Undo action

A dark toast confirming a move, with an Undo button - the classic pattern for reversible actions.

Moved to archive.

<button type="button" class="btn btn-outline-secondary" data-demo-toast="#toast-1222"><i class="bi bi-archive-fill" aria-hidden="true"></i> Archive item</button>
<div class="toast-container position-static mt-3">
  <div id="toast-1222" class="toast align-items-center text-bg-dark border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex align-items-center">
      <div class="toast-body">
        Moved to archive.
      </div>
      <button type="button" class="btn btn-link btn-sm text-warning text-decoration-none ms-auto" data-ui-dismiss="toast">Undo</button>
      <button type="button" class="me-2 btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>

12Several triggers

Each button shows its own toast; they stack in one container.

New comments are waiting.

Your session ends in 5 minutes.

Payment method declined.

<div class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-sm btn-info" data-demo-toast="#toast-1223">Info</button>
  <button type="button" class="btn btn-sm btn-warning" data-demo-toast="#toast-1224">Warning</button>
  <button type="button" class="btn btn-sm btn-danger" data-demo-toast="#toast-1225">Danger</button>
</div>
<div class="toast-container position-static mt-3">
  <div id="toast-1223" class="toast align-items-center text-bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        New comments are waiting.
      </div>
      <button type="button" class="me-2 m-auto btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
  <div id="toast-1224" class="toast align-items-center text-bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        Your session ends in 5 minutes.
      </div>
      <button type="button" class="me-2 m-auto btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
  <div id="toast-1225" class="toast align-items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        Payment method declined.
      </div>
      <button type="button" class="me-2 m-auto btn-close btn-close-white" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>

13Message notification

Avatar, name and a message preview with a reply button.

Certified coaches design every session around your level and your goals.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="../assets/img/avatar-5.svg" class="rounded me-2" width="20" height="20" alt="Ava Delgado"><strong class="me-auto">Ava Delgado</strong><small class="text-body-secondary">just now</small>
    <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Certified coaches design every session around your level and your goals.
    <div class="mt-2">
      <button type="button" class="btn btn-sm btn-outline-primary"><i class="bi bi-reply-fill" aria-hidden="true"></i> Reply</button>
    </div>
  </div>
</div>

14With a timer bar

A thin progress bar at the bottom suggests how long the toast stays.

227 files were backed up.

<div class="toast show overflow-hidden" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="bi bi-cloud-check-fill" aria-hidden="true"></i><strong class="me-auto ms-2">Backup done</strong>
    <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    227 files were backed up.
  </div>
  <div class="progress rounded-0" role="progressbar" aria-label="Time left" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height:3px">
    <div class="progress-bar" style="width: 60%">
    </div>
  </div>
</div>

15Added to cart

A product thumbnail, name and price after an add-to-cart click.

Spin class pack

$86.99

Checkout

<button type="button" class="btn btn-dark" data-demo-toast="#toast-1226"><i class="bi bi-cart-plus-fill" aria-hidden="true"></i> Add to cart</button>
<div class="toast-container position-static mt-3">
  <div id="toast-1226" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="bi bi-bag-check-fill" aria-hidden="true"></i>&nbsp;<strong class="me-auto">Added to cart</strong>
      <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      <div class="d-flex gap-2 align-items-center">
        <img src="../assets/img/product-7.svg" class="rounded" width="48" height="48" alt="Spin class pack">
        <div>
          <div class="fw-semibold small">
            Spin class pack
          </div>
          <div class="small text-body-secondary">
            $86.99
          </div>
        </div>
        <a href="#" class="btn btn-sm btn-primary ms-auto">Checkout</a>
      </div>
    </div>
  </div>
</div>

16Placement in a corner

A container positioned bottom-right inside a relative box - the same idea used at page level.

Shown in the bottom right corner.

<div class="position-relative bg-body-tertiary rounded" style="min-height:220px">
  <div class="toast-container position-absolute bottom-0 end-0 p-3">
    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <span class="d-inline-block rounded me-2 bg-secondary" style="width:1rem;height:1rem"></span><strong class="me-auto">Lumenan Studio</strong><small class="text-body-secondary">now</small>
        <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Shown in the bottom right corner.
      </div>
    </div>
  </div>
</div>

17Centered placement

<code>.top-50 .start-50 .translate-middle</code> center the container.

You are offline. Changes are kept locally.

<div class="position-relative bg-body-tertiary rounded" style="min-height:200px">
  <div class="toast-container position-absolute top-50 start-50 translate-middle">
    <div class="toast show align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex">
        <div class="toast-body">
          <i class="bi bi-wifi-off" aria-hidden="true"></i> You are offline. Changes are kept locally.
        </div>
        <button type="button" class="me-2 m-auto btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  </div>
</div>

18Stays until closed

<code>data-ui-autohide="false"</code> keeps the toast visible until the user closes it.

This message waits for you to close it.

<button type="button" class="btn btn-outline-primary" data-demo-toast="#toast-1227">Show persistent toast</button>
<div class="toast-container position-static mt-3">
  <div id="toast-1227" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-ui-autohide="false">
    <div class="toast-header">
      <i class="bi bi-pin-angle-fill" aria-hidden="true"></i>&nbsp;<strong class="me-auto">Pinned notice</strong>
      <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      This message waits for you to close it.
    </div>
  </div>
</div>

19Cookie notice

A wider static toast with a short notice and two buttons.

Lumenan Studio uses cookies to remember your preferences.

<div class="toast show" style="width:100%;max-width:440px" role="alert" aria-live="polite" aria-atomic="true">
  <div class="toast-body">
    <div class="d-flex gap-3">
      <span class="fs-3 text-warning"><i class="bi bi-cookie" aria-hidden="true"></i></span>
      <div>
        <p class="mb-2">Lumenan Studio uses cookies to remember your preferences.</p>
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-primary btn-sm" id="cookie-1228" data-ui-dismiss="toast">Accept</button>
          <button type="button" class="btn btn-outline-secondary btn-sm" data-ui-dismiss="toast">Only essential</button>
        </div>
      </div>
    </div>
  </div>
</div>

20Longer delay

<code>data-ui-delay="10000"</code> keeps an update notice on screen for ten seconds.

Small group classes mean your coach knows your name and your form.

<button type="button" class="btn btn-secondary" data-demo-toast="#toast-1229"><i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Check for updates</button>
<div class="toast-container position-static mt-3">
  <div id="toast-1229" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-ui-delay="10000">
    <div class="toast-header">
      <i class="bi bi-rocket-takeoff-fill" aria-hidden="true"></i>&nbsp;<strong class="me-auto">Version 5.6 is ready</strong>
      <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Small group classes mean your coach knows your name and your form.
      <div class="mt-2">
        <button type="button" class="btn btn-sm btn-primary">Update now</button>
      </div>
    </div>
  </div>
</div>