Bootstrap Toast - Component | DashLite Admin Template

Components

## Bootstrap Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. It's built with flexbox, so they’re easy to align and position.

#### Basic Examples

Toasts are lightweight notifications designed to mimic the push notifications.

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

###### Code Example

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
    <strong class="me-auto text-primary">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="close" data-dismiss="toast" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="toast-body">
    Hello, world! This is a toast message.
    </div>
    </div>

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

###### Code Example

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
    <strong class="me-auto text-primary">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="close" data-dismiss="toast" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="toast-body">
    Hello, world! This is a toast message.
    </div>
    </div>

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

###### Code Example

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
    <strong class="me-auto text-primary">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="close" data-dismiss="toast" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </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">
    <strong class="me-auto text-primary">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="close" data-dismiss="toast" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="toast-body">
    Heads up, toasts will stack automatically
    </div>
    </div>

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

###### Code Example

    <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
      <div class="toast-container position-absolute top-0 end-0 p-3">
        <div class="toast show">
          <div class="toast-header">
            <strong class="me-auto text-primary">Bootstrap</strong>
            <small>11 mins ago</small>
            <button type="button" class="close" data-dismiss="toast" aria-label="Close">
              <em class="icon ni ni-cross-sm"></em>
            </button>
          </div>
          <div class="toast-body">
            Hello, world! This is a toast message.
          </div>
        </div>
      </div>
    </div>

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

###### Code Example

    <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
      <!-- Position it -->
        <div class="toast-container position-absolute top-0 end-0 p-3">
            <!-- Then put toasts within -->
            <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">
                <strong class="me-auto text-primary">Bootstrap</strong>
                <small class="text-muted">just now</small>
                <button type="button" class="close" data-dismiss="toast" aria-label="Close">
                  <em class="icon ni ni-cross-sm"></em>
                </button>
              </div>
              <div class="toast-body">
                See? Just like this.
              </div>
            </div>

            <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">
                <strong class="me-auto text-primary">Bootstrap</strong>
                <small class="text-muted">2 seconds ago</small>
                <button type="button" class="close" data-dismiss="toast" aria-label="Close">
                  <em class="icon ni ni-cross-sm"></em>
                </button>
              </div>
              <div class="toast-body">
                Heads up, toasts will stack automatically
              </div>
            </div>
        </div>
      </div>

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

###### Code Example

    <!-- 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" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
    <strong class="me-auto text-primary">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="close" data-dismiss="toast" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="toast-body">
    Hello, world! This is a toast message.
    </div>
    </div>
    </div>

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

###### Code Example

    <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
    <div class="toast-header">
    <strong class="me-auto text-primary">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="close" data-dismiss="toast" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="toast-body">
    Hello, world! This is a toast message.
    </div>
    </div>

##### Select Your Country

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State