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="mr-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="mr-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="mr-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="mr-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" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
    <strong class="mr-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 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 style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
    <strong class="mr-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="mr-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>
    </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="mr-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="mr-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>