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" 
       Live demo</button>
<div class="toast" 
    role="alert" aria-live="assertive" 
  <div class="toast-header">
    <img src="..." class="rounded mr-2" 
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" 
        class="ml-2 mb-1 close" 
      <span aria-hidden="true">&times;</span>
  <div class="toast-body">
    Hello, world! This is a toast message.


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.


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