## Toasts

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

Toasts on Bootstrap

#### Basic Example

    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong><small class="text-body-secondary">11 mins ago</small>

        <button class="btn ms-2 p-0" type="button" data-bs-dismiss="toast" aria-label="Close"><span class="uil uil-times fs-7"></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.

#### Placement

Place toasts with the helper classes as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the `.toast`.

    <div class="position-relative mb-4" aria-live="polite" aria-atomic="true" style="min-height: 130px;">
      <div class="toast show position-absolute top-0 end-0">
        <div class="toast-header">
          <strong class="me-auto">Bootstrap</strong>
          <small class="text-body-secondary">11 mins ago</small>

          <button class="btn ms-2 p-0" type="button" data-bs-dismiss="toast" aria-label="Close"><span class="uil uil-times fs-7"></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.

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

    <div class="d-flex flex-center" aria-live="polite" aria-atomic="true" style="min-height: 300px;">
      <div class="toast show" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
        <div class="toast-header"><strong class="me-auto">Bootstrap</strong>
          <small class="text-body-secondary">11 mins ago</small>

          <button class="btn ms-2 p-0" type="button" data-bs-dismiss="toast" aria-label="Close"><span class="uil uil-times fs-7"></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.

#### Live Toast

    <button class="btn btn-primary" id="liveToastBtn" type="button">Show live toast</button>
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
      <div class="toast fade" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">Bootstrap</strong>
          <small class="text-body-secondary">11 mins ago</small>

          <button class="btn ms-2 p-0" type="button" data-bs-dismiss="toast" aria-label="Close"><span class="uil uil-times fs-7"></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.

#### Translucent

Toasts are slightly translucent, too, so they blend over whatever they might appear over.

    <div class="toast show" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-body-secondary">11 mins ago</small>

        <button class="btn ms-2 p-0" type="button" data-bs-dismiss="toast" data-bs-theme="dark" aria-label="Close"><span class="uil uil-times fs-7"></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.

#### Color schemes

    <div class="d-flex">
      <div class="toast show align-items-center text-white dark__text-gray-1100 bg-primary border-0" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
          <div class="toast-body">
            Hello, world! This is a toast message.

          </div>

          <button class="btn ms-2 p-0" type="button" data-bs-dismiss="toast" aria-label="Close"><span class="uil uil-times fs-7 text-white"></span></button>
        </div>
      </div>
    </div>

Hello, world! This is a toast message.

#### Custom Content

You can also add additional controls and components to toasts.

    <div class="toast show align-items-center" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
      <div class="d-flex">
        <div class="toast-body">Hello, world! This is a toast message.</div>

        <button class="btn ms-2 p-0" type="button" data-bs-dismiss="toast" aria-label="Close"><span class="uil uil-times fs-7"></span></button>
      </div>
      <div class="py-3 border-top border-translucent">

        <button class="btn btn-primary btn-sm" type="button">Take action</button>

        <button class="btn btn-secondary btn-sm ms-2" type="button" data-bs-dismiss="toast">Close</button>
      </div>
    </div>

Hello, world! This is a toast message.

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize