Bootstrap tutorial

Toasts

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

css class	description
toast	Specifies toast.
toast-header	Specifies a header section of toast.
toast-body	Specifies a body section of toast.

Code example

<button class="btn btn-success" 
       onclick="$('#myToast').toast('show')">
       Live demo</button>
    
<div class="text-center flex-grow-1">
        <button class="btn btn-success mt-2"
        onclick="$('#myToast').toast('show')">Live demo</button>
        
        <div id="myToast"
             class="toast" role="alert" 
             data-bs-autohide="true"
             data-bs-delay="2000"
             aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." 
    class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" 
    data-bs-dismiss="toast" 
    aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Hello, world! This is a toast message.

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...
})

Previous

Next