Toasts

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Toasts did not work as expected for me on Bootstrap 4.3, but worked fine with Bootstrap 4.5.

css class description
toast Specifies toast.
toast-header Specifies a header section of toast.
toast-body Specifies a body section of toast.
<button class="btn btn-success" 
       onclick="$('#myToast').toast('show')">
       Live demo</button>
    
<div class="toast" 
    id="myToast"
    data-delay="2000"
    role="alert" aria-live="assertive" 
    aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" 
        alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" 
        class="ml-2 mb-1 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>
    

methods

method descripton
toast(options) Attaches a toast handler to an element collection. Accepts an optional options object, that can have following properties:
  • animation - a boolean value indicating whether to apply a CSS fade transition to the toast.
  • autohide - a boolean value indicating whether to automatically hide the toast.
  • delay - delay hiding the toast in milliseconds, default value is 500.
You can set options as the data-* attribute, for example data-animation="false".
toast('show') Shows a toast.
toast('hide') Hides a toast.
toast('dispose') Destroys a toast.
$('#element').toast('show');
$('#element').toast('hide');
$('#element').toast('dispose');

events

event name descripton
show.bs.toast Fires immediately when the show() method is called.
shown.bs.toast Fires when the toast has been made visible to the user.
hide.bs.toast Fires immediately when the hide() method is called.
hidden.bs.toast Fires when a toast has been hidden from the user.
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})