Toasts

Bootstrap 5 Toast component

Bootstrap Toast component is a non-disruptive message in the corner of the interface. It provides quick "at-a-glance" feedback on the outcome of an action.

Push notifications to your visitors with a 'toast', a lightweight and easily customizable alert message. Toasts are designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Note: Read the API tab to find all available options and advanced customization

Basic example

Click the buttons to launch the toasts.

Edit in sandbox 
        
            
            <!-- Trigger buttons -->
            <button type="button" class="btn btn-primary" id="basic-primary-trigger">Primary</button>
            <button type="button" class="btn btn-secondary" id="basic-secondary-trigger">Secondary</button>
            <button type="button" class="btn btn-success" id="basic-success-trigger">Success</button>
            <button type="button" class="btn btn-danger" id="basic-danger-trigger">Danger</button>
            <button type="button" class="btn btn-warning" id="basic-warning-trigger">Warning</button>
            <button type="button" class="btn btn-info" id="basic-info-trigger">Info</button>
            <button type="button" class="btn btn-light" id="basic-light-trigger">Light</button>
            <button type="button" class="btn btn-dark" id="basic-dark-trigger">Dark</button>

            <!-- Toasts -->
            <div
              class="toast fade mx-auto"
              id="basic-primary-example"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="true"
              data-mdb-delay="2000"
              data-mdb-position="top-right"
              data-mdb-append-to-body="true"
              data-mdb-stacking="true"
              data-mdb-width="350px"
              data-mdb-color="primary"
            >
              <div class="toast-header text-white">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body text-white">Primary Basic Example</div>
            </div>

            <div
              class="toast fade mx-auto"
              id="basic-secondary-example"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="true"
              data-mdb-delay="2000"
              data-mdb-position="top-right"
              data-mdb-append-to-body="true"
              data-mdb-stacking="true"
              data-mdb-width="350px"
              data-mdb-color="secondary"
            >
              <div class="toast-header text-white">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body text-white">Secondary Basic Example</div>
            </div>

            <div
              class="toast fade mx-auto"
              id="basic-success-example"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="true"
              data-mdb-delay="2000"
              data-mdb-position="top-right"
              data-mdb-append-to-body="true"
              data-mdb-stacking="true"
              data-mdb-width="350px"
              data-mdb-color="success"
            >
              <div class="toast-header text-white">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body text-white">Success Basic Example</div>
            </div>

            <div
              class="toast fade mx-auto"
              id="basic-danger-example"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="true"
              data-mdb-delay="2000"
              data-mdb-position="top-right"
              data-mdb-append-to-body="true"
              data-mdb-stacking="true"
              data-mdb-width="350px"
              data-mdb-color="danger"
            >
              <div class="toast-header text-white">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body text-white">Danger Basic Example</div>
            </div>

            <div
              class="toast fade mx-auto"
              id="basic-warning-example"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="true"
              data-mdb-delay="2000"
              data-mdb-position="top-right"
              data-mdb-append-to-body="true"
              data-mdb-stacking="true"
              data-mdb-width="350px"
              data-mdb-color="warning"
            >
              <div class="toast-header text-white">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body text-white">Warning Basic Example</div>
            </div>

            <div
              class="toast fade mx-auto"
              id="basic-info-example"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="true"
              data-mdb-delay="2000"
              data-mdb-position="top-right"
              data-mdb-append-to-body="true"
              data-mdb-stacking="true"
              data-mdb-width="350px"
              data-mdb-color="info"
            >
              <div class="toast-header text-white">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body text-white">Info Basic Example</div>
            </div>

            <div
              class="toast fade mx-auto"
              id="basic-light-example"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="true"
              data-mdb-delay="2000"
              data-mdb-position="top-right"
              data-mdb-append-to-body="true"
              data-mdb-stacking="true"
              data-mdb-width="350px"
              data-mdb-color="light"
            >
              <div class="toast-header">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body">Light Basic Example</div>
            </div>

            <div
              class="toast fade mx-auto"
              id="basic-dark-example"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="true"
              data-mdb-delay="2000"
              data-mdb-position="top-right"
              data-mdb-append-to-body="true"
              data-mdb-stacking="true"
              data-mdb-width="350px"
              data-mdb-color="dark"
            >
              <div class="toast-header text-white">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body text-white">Dark Basic Example</div>
            </div>
          
        
    
        
            
            const toasts = [ 
              'basic-primary-example',
              'basic-secondary-example',
              'basic-success-example',
              'basic-danger-example',
              'basic-warning-example',
              'basic-info-example',
              'basic-light-example',
              'basic-dark-example',
            ];

            const triggers = [
              'basic-primary-trigger',
              'basic-secondary-trigger',
              'basic-success-trigger',
              'basic-danger-trigger',
              'basic-warning-trigger',
              'basic-info-trigger',
              'basic-light-trigger',
              'basic-dark-trigger',
            ];

            triggers.forEach((trigger, index) => {
              let basicInstance = mdb.Toast.getInstance(document.getElementById(toasts[index]));
              document.getElementById(trigger).addEventListener('click', () => {
                basicInstance.show();
              });
            });

Static example

Edit in sandbox 
        
            
            <div
              class="toast show fade mx-auto"
              id="static-example"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="false"
            >
              <div class="toast-header">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body">Static Example</div>
            </div>
          
        
    
        
            
            const staticInstance = mdb.Toast.getInstance(document.getElementById('static-example'));
            staticInstance.show();

Colors

Create different toast color schemes with our color and background utilities. Here we’ve added .bg-primary and .text-white to the .toast, and then added .btn-close-white to our close button. For a crisp edge, we removed the default border with .border-0.

Edit in sandbox 
        
            
            <div class="row justify-content-center">
              <div class="col-xl-5 col-lg-6 mb-2">
                <div
                  class="toast show fade text-white"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                  data-mdb-color="info"
                  data-mdb-autohide="false"
                >
                  <div class="toast-header text-white">
                    <i class="fas fa-info-circle fa-lg me-2"></i>
                    <strong class="me-auto">MDBootstrap</strong>
                    <small>11 mins ago</small>
                    <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
                  </div>
                  <div class="toast-body">Hello, world! This is a toast message.</div>
                </div>
              </div>
              <div class="col-xl-5 col-lg-6 mb-2">
                <div
                  class="toast show fade text-white"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                  data-mdb-color="warning"
                  data-mdb-autohide="false"
                >
                  <div class="toast-header text-white">
                    <i class="fas fa-exclamation-triangle fa-lg me-2"></i>
                    <strong class="me-auto">MDBootstrap</strong>
                    <small>11 mins ago</small>
                    <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
                  </div>
                  <div class="toast-body">Hello, world! This is a toast message.</div>
                </div>
              </div>
            </div>
            <div class="row mb-2 justify-content-center">
              <div class="col-xl-5 col-lg-6 mb-2">
                <div
                  class="toast show fade text-white"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                  data-mdb-color="success"
                  data-mdb-autohide="false"
                >
                  <div class="toast-header text-white">
                    <i class="fas fa-check fa-lg me-2"></i>
                    <strong class="me-auto">MDBootstrap</strong>
                    <small>11 mins ago</small>
                    <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
                  </div>
                  <div class="toast-body">Hello, world! This is a toast message.</div>
                </div>
              </div>
              <div class="col-xl-5 col-lg-6 mb-2">
                <div
                  class="toast show fade text-white"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                  data-mdb-color="danger"
                  data-mdb-autohide="false"
                >
                  <div class="toast-header text-white">
                    <i class="fas fa-exclamation-circle fa-lg me-2"></i>
                    <strong class="me-auto">MDBootstrap</strong>
                    <small>11 mins ago</small>
                    <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
                  </div>
                  <div class="toast-body">Hello, world! This is a toast message.</div>
                </div>
              </div>
            </div>
          
        
    
        
            
            const instance = mdb.Toast.getInstance(document.getElementById('example'));
            instance.update({ color: 'info', });

Placement

You can set position of every notification using data-mdb-position attribute or update() method.

Select horizontal / vertical alignment

Current position: top-right
Edit in sandbox 
        
            
            <div
              class="toast text-white"
              id="placement-example-toast"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="false"
              data-mdb-position="..."
            >
              <div class="toast-header text-white">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body">Toast position</div>
            </div>
          
        
    
        
            
            const instance = mdb.Toast.getInstance(document.getElementById('position-example-toast'));
            instance.update({ position: 'top-right', });

Offset

You can also change offset of every notification using data-mdb-offset attribute or update() method.

Edit in sandbox 
        
            
            <div
              class="toast text-white"
              id="offset-toast"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="false"
              data-mdb-offset="..."
              data-mdb-color="info"
            >
              <div class="toast-header text-white">
                <strong class="me-auto">MDBootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body">Toast offset</div>
            </div>
          
        
    
        
            
            const instance = mdb.Toast.getInstance(document.getElementById('offset-toast'));
            instance.update({ offset: 50, });

Container

You can display notification anywhere. Just put your toast in your target element and fill data-mdb-container attribute with id or class of parent or update() method.

Edit in sandbox 
        
            
            <div id="parent">
              <div
                class="toast"
                id="container-example-toast"
                role="alert"
                aria-live="assertive"
                aria-atomic="true"
                data-mdb-autohide="false"
                data-mdb-container="..."
              >
                <div class="toast-header">
                  <strong class="me-auto">MDBootstrap</strong>
                  <small>11 mins ago</small>
                  <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">Toast container</div>
              </div>
            </div>
          
        
    
        
            
            const instance = mdb.Toast.getInstance(document.getElementById('container-example-toast'));
            instance.update({ container: '#parent', });

Stacking

You can turn on/off stacking your notifications using data-mdb-stacking attribute or update() method.

Edit in sandbox 
        
            
            <button type="button" class="btn btn-primary me-3" id="stacking-trigger">Show toast notification</button>
          
        
    
        
            
            let stackCount = 0;

            document.getElementById('stacking-trigger').addEventListener('click', () => {
              stackCount++;

              const toast = document.createElement('div');
              toast.innerHTML = `
                <div class="toast-header">
                  <strong class="me-auto">${stackCount}</strong>
                  <small>11 mins ago</small>
                  <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                  Stacking element
                </div>
              `;

              toast.classList.add('toast', 'fade');

              document.body.appendChild(toast);

              const toastInstance = new mdb.Toast(toast, {
                stacking: true,
                hidden: true,
                width: '450px',
                position: 'top-right',
                autohide: false,
                delay: 5000,
              });

              toastInstance.show();
            });

Stacking (container)

You can turn on/off stacking your notifications using data-mdb-stacking attribute or update() method.

Edit in sandbox 
        
            
            <div class="container text-center" id="stacking-container" style="height: 400px; overflow: scroll;">
              <button type="button" class="btn btn-primary me-3" id="stacking-container-trigger">Show toast notification</button>
            </div>
          
        
    
        
            
            let stackCount = 0;

            document.getElementById('stacking-container-trigger').addEventListener('click', () => {
              stackCount++;

              const toast = document.createElement('div');
              toast.innerHTML = `
                <div class="toast-header">
                  <strong class="me-auto">${stackCount}</strong>
                  <small>11 mins ago</small>
                  <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body text-start">
                  Stacking element
                </div>
              `;

              toast.classList.add('toast', 'fade');

              document.getElementById('stacking-container').appendChild(toast);

              const toastInstance = new mdb.Toast(toast, {
                stacking: true,
                hidden: true,
                width: '450px',
                position: 'top-right',
                container: '#stacking-container',
                autohide: true,
                delay: 5000,
              });

              toastInstance.show();
            });

Toasts - API

Usage

Via data attributes

Edit in sandbox 
        
            
          <div class="toast" id="example-toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
              <strong class="me-auto">MDBootstrap</strong>
              <small>11 mins ago</small>
              <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="toast-body">Example toast</div>
          </div>
Dismiss

Dismissal can be achieved with data attributes on a button within the toast as demonstrated below:

Edit in sandbox 
        
            
            <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>

or on a button outside the toast using the data-mdb-target as demonstrated below:

Edit in sandbox 
        
            
            <button type="button" class="btn-close" data-mdb-dismiss="toast" data-mdb-target="#my-toast" aria-label="Close"></button>

Via JavaScript

Edit in sandbox 
        
            
          mdb.Toast.getInstance(document.getElementById('placement-example-toast')).update({ 
            position: ...,
            offset: ...,
            container: ...,
          });

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
        
            
          $('.example-class').toast(options);

Options

Name Type Default Description
width String / null null Defines the width of a toast
position String 'top-left' Changes position of toast
color String Sets background of a toast (basic MDB colors)
offset Number '10' Changes offset of toast
container String - Defines id/class of parent element
autohide Boolean true Toasts will hide automatically or not
animation Boolean true Toasts will be animated or not
delay Boolean 500 Sets length of animation delay
appendToBody Boolean false Appends element to the end of body
stacking Boolean true Enables stacking notifications

Methods

Name Parameters Description Example
show - Shows toast instance.show()
hide - Hides toast instance.hide()
dispose - Removes a mdb.Toast instance instance.dispose()
getInstance element Static method which allows you to get the toast instance associated to a DOM element. Toast.getInstance(toastEl)
getOrCreateInstance element Static method which returns the toast instance associated to a DOM element or create a new one in case it wasn't initialized. Toast.getOrCreateInstance(toastEl)
update options (Object) Updates options of mdb.Toast instance instance.update({position: 'top-center'})
Edit in sandbox 
        
            
          mdb.Toast.getInstance(document.getElementById('show-example')).show();

Events

Name Description
show.mdb.toast Emitted when a toast has been toggled
shown.mdb.toast Emitted once toast is shown
hide.mdb.toast Emitted when a toast has been toggled
hidden.mdb.toast Emitted once toast is hidden
Edit in sandbox 
        
            
          const instance = mdb.Toast.getInstance(document.getElementById('show-example'));
          instance.addEventListener('hidden.mdb.toast', () => { 
            // do something...
          });

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Edit in sandbox 
        
            
          import { Toast } from 'mdb-ui-kit';