Finder v2.0.0
Buy now
Bootstrap docs

Toasts

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

Tiny variant

<!-- Default tiny toast. Remove .fade and .show classes to make it initially hidden. -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Color variations -->

<!-- Primary background -->
<div class="toast text-bg-primary border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Secondary background -->
<div class="toast text-bg-secondary border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Success background -->
<div class="toast text-bg-success border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Danger background -->
<div class="toast text-bg-danger border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Warning background -->
<div class="toast text-bg-warning border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Info background -->
<div class="toast text-bg-info border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Light background -->
<div class="toast text-bg-light border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Dark background -->
<div class="toast text-bg-dark border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Primary border -->
<div class="toast border-primary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Secondary border -->
<div class="toast border-secondary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Success border -->
<div class="toast border-success fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Danger border -->
<div class="toast border-danger fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Warning border -->
<div class="toast border-warning fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Info border -->
<div class="toast border-info fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

<!-- Dark border -->
<div class="toast border-dark fade show" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

Tiny with icon

<!-- Default tiny toast with icon. Remove .fade and .show classes to make it initially hidden. -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="fi-settings fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Color variations and icons -->

<!-- Primary background -->
<div class="toast text-bg-primary border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="fi-bell fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Secondary background -->
<div class="toast text-bg-secondary border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="fi-clock fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Success background -->
<div class="toast text-bg-success border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="fi-check-circle fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Danger background -->
<div class="toast text-bg-danger border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="fi-banned fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Warning background -->
<div class="toast text-bg-warning border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="fi-alert-triangle fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Info background -->
<div class="toast text-bg-info border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="fi-info fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Light background -->
<div class="toast text-bg-light border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="light">
  <div class="d-flex">
    <i class="fi-unlock fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn btn-sm fs-base opacity-75 border-0 p-0 ms-auto" data-bs-dismiss="toast" aria-label="Close">
      <i class="fi-close"></i>
    </button>
  </div>
</div>

<!-- Dark background -->
<div class="toast text-bg-dark border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
  <div class="d-flex">
    <i class="fi-map-pin fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Primary border -->
<div class="toast border-primary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="fi-bell text-primary fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Secondary border -->
<div class="toast border-secondary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="fi-clock text-secondary fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Success border -->
<div class="toast border-success fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="fi-check-circle text-success fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Danger border -->
<div class="toast border-danger fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="fi-banned text-danger fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Warning border -->
<div class="toast border-warning fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="fi-alert-triangle text-warning fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Info border -->
<div class="toast border-info fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="fi-info text-info fs-base mt-1 me-2"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<!-- Dark border -->
<div class="toast border-dark fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <i class="fi-map-pin text-dark fs-base mt-1 me-2 d-none-dark"></i>
    <i class="fi-map-pin text-light fs-base mt-1 me-2 d-none d-flex-dark"></i>
    <div class="toast-body me-2">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

With header and icon

<!-- Default toast. Remove .fade and .show classes to make it initially hidden. -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="fi-settings text-body-secondary fs-base me-2"></i>
    <span class="fw-semibold">Default toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Primary toast -->
<div class="toast border-primary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="fi-bell text-primary fs-base me-2"></i>
    <span class="fw-semibold">Primary toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Secondary toast -->
<div class="toast border-secondary fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="fi-clock text-secondary fs-base me-2"></i>
    <span class="fw-semibold">Secondary toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Success toast -->
<div class="toast border-success fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="fi-check-circle text-success fs-base me-2"></i>
    <span class="fw-semibold">Success toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Danger toast -->
<div class="toast border-danger fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="fi-banned text-danger fs-base me-2"></i>
    <span class="fw-semibold">Danger toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Warning toast -->
<div class="toast border-warning fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="fi-alert-triangle text-warning fs-base me-2"></i>
    <span class="fw-semibold">Warning toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Info toast -->
<div class="toast border-info fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="fi-info text-info fs-base me-2"></i>
    <span class="fw-semibold">Info toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Light toast -->
<div class="toast text-bg-light border-0 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="light">
  <div class="toast-header text-dark">
    <i class="fi-unlock fs-base me-2"></i>
    <span class="fw-semibold">Light toast</span>
    <button type="button" class="btn btn-sm fs-base opacity-75 border-0 p-0 ms-auto" data-bs-dismiss="toast" aria-label="Close">
      <i class="fi-close"></i>
    </button>
  </div>
  <div class="toast-body text-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

<!-- Dark toast -->
<div class="toast border-dark fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="fi-map-pin text-dark fs-base me-2 d-none-dark"></i>
    <i class="fi-map-pin text-light fs-base me-2 d-none d-flex-dark"></i>
    <span class="fw-semibold">Dark toast</span>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body me-2">
    Hello, world! This is a toast message.
  </div>
</div>

Action buttons

<!-- Toast with action buttons -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="fi-bell text-primary fs-base mt-1 me-2"></i>
    <span class="fw-semibold">Notification center</span>
    <small class="text-body-secondary ms-auto">2 seconds ago</small>
  </div>
  <div class="toast-body me-2">
    You have 10 unread messages.
  </div>
  <div class="d-flex pt-3">
    <button type="button" class="btn btn-sm btn-primary me-2">Read all</button>
    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="toast">Close</button>
  </div>
</div>

Placement

Toast title 11 mins ago
Hello, world! This is a toast message. 
<!-- Top left -->
<div class="toast-container p-3 top-0 start-0">
  <div class="toast">...</div>
</div>

<!-- Top center -->
<div class="toast-container p-3 top-0 start-50 translate-middle-x">
  <div class="toast">...</div>
</div>

<!-- Top right -->
<div class="toast-container p-3 top-0 end-0">
  <div class="toast">...</div>
</div>

<!-- Middle left -->
<div class="toast-container p-3 top-50 start-0 translate-middle-y">
  <div class="toast">...</div>
</div>

<!-- Middle center -->
<div class="toast-container p-3 top-50 start-50 translate-middle">
  <div class="toast">...</div>
</div>

<!-- Middle right -->
<div class="toast-container p-3 top-50 end-0 translate-middle-y">
  <div class="toast">...</div>
</div>

<!-- Bottom left -->
<div class="toast-container p-3 bottom-0 start-0">
  <div class="toast">...</div>
</div>

<!-- Bottom center -->
<div class="toast-container p-3 bottom-0 start-50 translate-middle-x">
  <div class="toast">...</div>
</div>

<!-- Bottom right -->
<div class="toast-container p-3 bottom-0 end-0">
  <div class="toast">...</div>
</div>

Live demo

<!-- Trigger button -->
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<!-- Toast inside fixed positioned container -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast border-primary" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="fi-bell text-primary fs-base mt-1 me-2"></i>
      <strong class="me-auto">Toast title</strong>
      <small class="text-body-secondary">5 mins ago</small>
      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>
(() => {
  'use strict'

  const toastTrigger = document.getElementById('liveToastBtn')
  const toastLiveExample = document.getElementById('liveToast')

  if (toastTrigger) {
    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
    toastTrigger.addEventListener('click', () => {
      toastBootstrap.show()
    })
  }
})()
Top