MStoreComponents
Live previewDocsBuy now

Toasts

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

Basic example

<!-- Basic toast example (remove fade show to hide toast initially) -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <div class="d-inline-block align-middle bg-primary rounded-circle mr-2" style="width: 1.25rem; height: 1.25rem;"></div>
    <span class="text-body font-weight-semibold mr-auto">Bootstrap</span>
    <small>11 mins ago</small>
    <button type="button" class="close ml-2 mb-1" 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>
// Basic toast example (remove .fade .show to hide toast initially)
.toast.fade.show(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header
    .d-inline-block.align-middle.bg-primary.rounded-circle.mr-2(style="width: 1.25rem; height: 1.25rem;")
    span.text-body.font-weight-semibold.mr-auto Bootstrap
    small 11 mins ago
    button(type="button", data-dismiss="toast", aria-label="Close").close.ml-2.mb-1
      span(aria-hidden="true") &times;
  .toast-body Hello, world! This is a toast message.

Colors variation

<!-- Primary toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-primary text-white">
    <i class="mr-2" data-feather="bell" style="width: 1.25rem; height: 1.25rem;"></i>
    <span class="font-weight-semibold mr-auto">Primary toast</span>
    <button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body text-primary">Hello, world! This is a toast message.</div>
</div>

<!-- Success toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-success text-white">
    <i class="mr-2" data-feather="check-circle" style="width: 1.25rem; height: 1.25rem;"></i>
    <span class="font-weight-semibold mr-auto">Success toast</span>
    <button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body text-success">Hello, world! This is a toast message.</div>
</div>

<!-- Danger toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-danger text-white">
    <i class="mr-2" data-feather="slash" style="width: 1.25rem; height: 1.25rem;"></i>
    <span class="font-weight-semibold mr-auto">Danger toast</span>
    <button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body text-danger">Hello, world! This is a toast message.</div>
</div>

<!-- Warning toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-warning text-white">
    <i class="mr-2" data-feather="alert-circle" style="width: 1.25rem; height: 1.25rem;"></i>
    <span class="font-weight-semibold mr-auto">Warning toast</span>
    <button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body text-warning">Hello, world! This is a toast message.</div>
</div>

<!-- Info toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-info text-white">
    <i class="mr-2" data-feather="info" style="width: 1.25rem; height: 1.25rem;"></i>
    <span class="font-weight-semibold mr-auto">Info toast</span>
    <button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body text-info">Hello, world! This is a toast message.</div>
</div>

<!-- Dark toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-dark text-white">
    <i class="mr-2" data-feather="clock" style="width: 1.25rem; height: 1.25rem;"></i>
    <span class="font-weight-semibold mr-auto">Dark toast</span>
    <button type="button" class="close text-white ml-2 mb-1" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body text-dark">Hello, world! This is a toast message.</div>
</div>
// Primary toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-primary.text-white
    i(data-feather="bell", style="width: 1.25rem; height: 1.25rem;").mr-2
    span.font-weight-semibold.mr-auto Primary toast
    button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
      span(aria-hidden="true") &times;
  .toast-body.text-primary Hello, world! This is a toast message.

// Success toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-success.text-white
    i(data-feather="check-circle", style="width: 1.25rem; height: 1.25rem;").mr-2
    span.font-weight-semibold.mr-auto Success toast
    button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
      span(aria-hidden="true") &times;
  .toast-body.text-success Hello, world! This is a toast message.

// Danger toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-danger.text-white
    i(data-feather="slash", style="width: 1.25rem; height: 1.25rem;").mr-2
    span.font-weight-semibold.mr-auto Danger toast
    button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
      span(aria-hidden="true") &times;
  .toast-body.text-danger Hello, world! This is a toast message.

// Warning toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-warning.text-white
    i(data-feather="alert-circle", style="width: 1.25rem; height: 1.25rem;").mr-2
    span.font-weight-semibold.mr-auto Warning toast
    button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
      span(aria-hidden="true") &times;
  .toast-body.text-warning Hello, world! This is a toast message.

// Info toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-info.text-white
    i(data-feather="info", style="width: 1.25rem; height: 1.25rem;").mr-2
    span.font-weight-semibold.mr-auto Info toast
    button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
      span(aria-hidden="true") &times;
  .toast-body.text-info Hello, world! This is a toast message.

// Dark toast
.toast(role="alert", aria-live="assertive", aria-atomic="true")
  .toast-header.bg-dark.text-white
    i(data-feather="clock", style="width: 1.25rem; height: 1.25rem;").mr-2
    span.font-weight-semibold.mr-auto Dark toast
    button(type="button", data-dismiss="toast", aria-label="Close").close.text-white.ml-2.mb-1
      span(aria-hidden="true") &times;
  .toast-body.text-dark Hello, world! This is a toast message.

Toasts in action

<!-- Place actual toast somewhere in the DOM. It should be placed inside wrapper div that defines its position -->
<div class="toast-container toast-top-left">
  <div id="default-toast" class="toast">...</div>
</div>
<div class="toast-container toast-top-center">
  <div id="default-toast" class="toast">...</div>
</div>
<div class="toast-container toast-top-right">
  <div id="default-toast" class="toast">...</div>
</div>
<div class="toast-container toast-bottom-left">
  <div id="default-toast" class="toast">...</div>
</div>
<div class="toast-container toast-bottom-center">
  <div id="default-toast" class="toast">...</div>
</div>
<div class="toast-container toast-bottom-right">
  <div id="default-toast" class="toast">...</div>
</div>

<!-- Call the toast by id -->
<button type="button" class="btn btn-outline-secondary" data-toggle="toast" data-target="#default-toast">Default top left</button>
// Place actual toast somewhere in the DOM. It should be placed inside wrapper div that defines its position
.toast-container.toast-top-left
  #default-toast.toast ...
.toast-container.toast-top-center
  #default-toast.toast ...
.toast-container.toast-top-right
  #default-toast.toast ...
.toast-container.toast-bottom-left
  #default-toast.toast ...
.toast-container.toast-bottom-center
  #default-toast.toast ...
.toast-container.toast-bottom-right
  #default-toast.toast ...

// Call the toast by id
button(type="button", class="btn btn-outline-secondary", data-toggle="toast", data-target="#default-toast") Default top left