# Toasts

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

## Basic Examples

Bootstrap 11 mins ago
Hello, world! This is a toast message.

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

Bootstrap 11 mins ago
Hello, world! This is a toast message.

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

Bootstrap 11 mins ago
Hello, world! This is a toast message.

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

Bootstrap just now
See? Just like this.
Bootstrap just now
See? Just like this.

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

Hello, world! This is a toast message.

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

Hello, world! This is a toast message.

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

Hello, world! This is a toast message.

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

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

Bootstrap just now
See? Just like this.
Bootstrap 2 seconds ago
Heads up, toasts will stack automatically

    <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

Bootstrap 11 mins ago
Hello, world! This is a toast message.

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

Bootstrap 11 mins ago
Hello, world! This is a toast message.

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