Bootstrap docs

# Toasts

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

#### Tiny variant

Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.

    <!-- 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

Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.

    <!-- 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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-map-pin text-dark fs-base mt-1 me-2 d-none-dark"></i>
        <i class="ci-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
Hello, world! This is a toast message.
Primary toast
Hello, world! This is a toast message.
Secondary toast
Hello, world! This is a toast message.
Success toast
Hello, world! This is a toast message.
Danger toast
Hello, world! This is a toast message.
Warning toast
Hello, world! This is a toast message.
Info toast
Hello, world! This is a toast message.
Light toast
Hello, world! This is a toast message.
Dark toast
Hello, world! This is a toast message.

    <!-- 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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-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="ci-map-pin text-dark fs-base me-2 d-none-dark"></i>
        <i class="ci-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

Notification center 2 seconds ago
You have 10 unread messages.

    <!-- Toast with action buttons -->
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <i class="ci-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 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

Toast title 5 mins ago
Hello, world! This is a toast message.

    <!-- 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="ci-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