Documentation

Browse source code
Introduction Alerts Autosize Avatars Badges Breadcrumb Buttons Cards Carousel Colors Countup Cursors Charts Divider Empty states Flags Form elements Form helpers Form input mask Layout Progress Payments Range slider Ribbons New Spinners Steps Tables Tabs Timelines Toasts Tooltips Typography

Bootstrap documentation

Toasts

The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).

Default markup

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
   <div class="toast-header">
      <span class="avatar avatar-sm mr-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
      <strong class="mr-auto">Mallory Hulme</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 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>

Translucent

Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the backdrop-filter CSS property, we’ll also attempt to blur the elements under a toast.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
   <div class="toast-header">
      <span class="avatar avatar-sm mr-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
      <strong class="mr-auto">Mallory Hulme</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 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>

Stacking toasts

If you want to stack toasts just put them in the same container.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
   <div class="toast-header">
      <span class="avatar avatar-sm mr-2" style="background-image: url(./static/avatars/003m.jpg)"></span>
      <strong class="mr-auto">Dunn Slane</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 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 class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
   <div class="toast-header">
      <span class="avatar avatar-sm mr-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
      <strong class="mr-auto">Mallory Hulme</strong>
      <small>7 mins ago</small>
      <button type="button" class="ml-2 close" data-dismiss="toast" aria-label="Close">
         <span aria-hidden="true">&times;</span>
      </button>
   </div>
   <div class="toast-body">
      This is another toast message.
   </div>
</div>