Toasts

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

Basic Examples

<!-- Basic -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded me-2" width="20" height="20"
      xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
      role="img">
      <rect width="100%" height="100%" fill="var(--bs-primary)"></rect>
    </svg>
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close">
  </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Live example

<!-- Live toast-->
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <svg class="bd-placeholder-img rounded me-2" width="20" height="20"
        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
        role="img">
        <rect width="100%" height="100%" fill="var(--bs-primary)"></rect>
      </svg>
      <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>
</div>

Translucent

 <!--Translucent -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded me-2" width="20" height="20"
      xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
      role="img">
      <rect width="100%" height="100%" fill="var(--bs-primary)"></rect>
    </svg>
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ms-2 mb-1 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

<!--Stacking-->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded me-2" width="20" height="20"
      xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
      role="img">
      <rect width="100%" height="100%" fill="var(--bs-primary)"></rect>
    </svg>
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    See? Just like this.
  </div>
</div>
<div class="toast fade show mt-2" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded me-2" width="20" height="20"
      xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
      role="img">
      <rect width="100%" height="100%" fill="var(--bs-primary)"></rect>
    </svg>
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close">
    </button>
  </div>
  <div class="toast-body"> See? Just like this. </div>
</div>

Custom content

<!-- Custom content-->
<div class="toast align-items-center fade show" role="alert" aria-live="assertive"
  aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      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>

Alternatively, you can also add additional controls and components to toasts.

Custom content

<!-- Custom content-->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm"
        data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Color schemes

<!-- Color schemes -->
<div class="toast align-items-center text-white bg-primary border-0 fade show" role="alert"
  aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
      aria-label="Close"></button>
  </div>
</div>

Placement

avatar Bootstrap 11 mins ago
Hello, world! This is a toast message.
<!-- Placement-->
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast show" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="../../assets/images/avatar/avatar-1.jpg" class="rounded me-2 avatar-xs"
        alt="avatar">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"
        aria-label="Close">
  </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

For systems that generate more notifications, consider using a wrapping element so they can easily stack.

Placement

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<!-- Position it -->
<div style="position: absolute; top: 0; right: 0;">
  <!-- Then put toasts within -->
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <svg class="bd-placeholder-img rounded me-2" width="20" height="20"
        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
        focusable="false" role="img">
        <rect width="100%" height="100%" fill="var(--bs-primary)">
        </rect>
      </svg>
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close">

      </button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <svg class="bd-placeholder-img rounded me-2" width="20" height="20"
        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
        focusable="false" role="img">
        <rect width="100%" height="100%" fill="var(--bs-primary)">
        </rect>
      </svg>
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="ms-2 mb-1 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>

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

Placement

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true"
  class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
  <!-- Then put toasts within -->
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <svg class="bd-placeholder-img rounded me-2" width="20" height="20"
        xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
        focusable="false" role="img">
        <rect width="100%" height="100%" fill="var(--bs-primary)"></rect>
      </svg>
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close">

      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Accessibility

<!-- Accessibility -->
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast fade show"
  data-autohide="false">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded me-2" width="20" height="20"
      xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
      role="img">
      <rect width="100%" height="100%" fill="var(--bs-primary)"></rect>
    </svg>
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close">

    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>