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>11 mins ago</small>
    <button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>

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>11 mins ago</small>
      <button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>
<div class="card shadow-none border border-300 mx-n4 border-0" data-component-card>
  <div class="card-header p-4 border-bottom border-300 bg-soft">
    <div class="row g-3 justify-content-between align-items-end">
      <div class="col-12 col-md">
        <p class="mb-0 mt-2 text-800">You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.</p>
      </div>
      <div class="col col-md-auto">
        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
            <div class="fas fa-copy me-1"></div>Copy Code
          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#-code" role="button" aria-controls="-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="collapse code-collapse" id="-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;div class=&quot;d-flex flex-center&quot; aria-live=&quot;polite&quot; aria-atomic=&quot;true&quot; style=&quot;min-height: 300px;&quot;&gt;
  &lt;div class=&quot;toast show&quot; role=&quot;alert&quot; data-bs-autohide=&quot;false&quot; aria-live=&quot;assertive&quot; aria-atomic=&quot;true&quot;&gt;
    &lt;div class=&quot;toast-header&quot;&gt;&lt;strong class=&quot;me-auto&quot;&gt;Bootstrap&lt;/strong&gt;&lt;small&gt;11 mins ago&lt;/small&gt;&lt;button class=&quot;ms-2 btn-close&quot; type=&quot;button&quot; data-bs-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;&lt;/div&gt;
    &lt;div class=&quot;toast-body&quot;&gt;Hello, world! This is a toast message.&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
    </div>
    <div class="p-4 code-to-copy">
      <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>11 mins ago</small><button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button></div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>
      </div>
    </div>
  </div>
</div>
Bootstrap11 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>11 mins ago</small><button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button></div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>

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>11 mins ago</small><button class="btn-close btn-close-white" type="button" data-bs-dismiss="toast" aria-label="Close"></button></div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>

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-muted">11 mins ago</small><button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button></div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>

Color schemes

<div class="d-flex">
  <div class="toast show align-items-center text-white 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-close btn-close-white ms-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>
</div>

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-close m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="py-3 border-top">
    <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>
On this page