Documentation

Browse source code
index Alerts Autosize Avatars Badges Breadcrumb Buttons Cards Carousel Colors Cursors Charts Divider Empty states Flags Form elements Form helpers Form input mask Progress 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">
   <div class="toast-header">
      <span class="avatar avatar-sm mr-2" style="background-image: url(./img/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>