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.

Primary Basic Example

Secondary Basic Example

Success Basic Example

Danger Basic Example

Warning Basic Example

Info Basic Example

Light Basic Example

Dark Basic Example

Show code Edit in sandbox

HTML
JavaScript

        
            
            <!-- 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">
                <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">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">
                <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">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">
                <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">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">
                <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">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">
                <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">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">
                <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">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">
                <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">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

Static Example

Show code Edit in sandbox

HTML

        
            
            <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

Since 4.2.0 release our toasts have their own color palette, so we don't use .bg-* and .text-* color classes. For a crisp edge, we removed the default border with .border-0.

Hello, world! This is a toast message.

Hello, world! This is a toast message.

Hello, world! This is a toast message.

Hello, world! This is a toast message.

Show code Edit in sandbox

HTML
JavaScript

        
            
            <div class="row justify-content-center">
              <div class="col-xl-5 col-lg-6 mb-2">
                <div
                  class="toast show fade"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                  data-mdb-color="info"
                  data-mdb-autohide="false"
                >
                  <div class="toast-header">
                    <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" 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"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                  data-mdb-color="warning"
                  data-mdb-autohide="false"
                >
                  <div class="toast-header">
                    <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" 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"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                  data-mdb-color="success"
                  data-mdb-autohide="false"
                >
                  <div class="toast-header">
                    <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" 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"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
                  data-mdb-color="danger"
                  data-mdb-autohide="false"
                >
                  <div class="toast-header">
                    <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" 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

Toast placement

Show code Edit in sandbox

HTML
JavaScript

        
            
            <div
              class="toast"
              id="placement-example-toast"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-mdb-autohide="false"
              data-mdb-position="..."
            >
              <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 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.

Offset: 50

Show code Edit in sandbox

HTML
JavaScript

        
            
            <div
              class="toast"
              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">
                <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 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.

Toast inside another element!

Show code Edit in sandbox

HTML
JavaScript

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

Show code Edit in sandbox

HTML
JAVASCRIPT

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

Show code Edit in sandbox

HTML
JavaScript

        
            
            <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

Show code Edit in sandbox

HTML

        
            
          <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:

Show code Edit in sandbox

HTML

        
            
            <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:

Show code Edit in sandbox

HTML

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

Via JavaScript

Show code Edit in sandbox

JavaScript

        
            
          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.

Show code Edit in sandbox

JavaScript

        
            
          $(document).ready(() => {
            $('.example-class').toast(options);
          });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-position="".

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	`myToast.show()`
`hide`	-	Hides toast	`myToast.hide()`
`dispose`	-	Removes a mdb.Toast instance	`myToast.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	`myToast.update({position: 'top-center'})`

Show code Edit in sandbox

JavaScript

        
            
          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

Show code Edit in sandbox

JavaScript

        
            
          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:

Show code Edit in sandbox

JavaScript

        
            
          import { Toast } from 'mdb-ui-kit';

CSS variables

As part of MDB’s evolving CSS variables approach, toast now use local CSS variables on .toast for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Show code Edit in sandbox

CSS

        
            
        // .toast
        --#{$prefix}toast-zindex: #{$zindex-toast};
        --#{$prefix}toast-padding-x: #{$toast-padding-x};
        --#{$prefix}toast-padding-y: #{$toast-padding-y};
        --#{$prefix}toast-spacing: #{$toast-spacing};
        --#{$prefix}toast-max-width: #{$toast-max-width};
        @include rfs($toast-font-size, --#{$prefix}toast-font-size);
        --#{$prefix}toast-color: #{$toast-color};
        --#{$prefix}toast-bg: #{$toast-background-color};
        --#{$prefix}toast-border-width: #{$toast-border-width};
        --#{$prefix}toast-border-color: #{$toast-border-color};
        --#{$prefix}toast-border-radius: #{$toast-border-radius};
        --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
        --#{$prefix}toast-header-color: #{$toast-header-color};
        --#{$prefix}toast-header-bg: #{$toast-header-background-color};
        --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
         
        --#{$prefix}toast-border-bottom-width: #{$toast-border-bottom-width};
        --#{$prefix}toast-btn-close-width: #{$toast-btn-close-width};
        --#{$prefix}toast-btn-close-mr: #{$toast-btn-close-mr};
        --#{$prefix}toast-btn-close-ml: #{$toast-btn-close-ml};

        // .toast-container
        --#{$prefix}toast-zindex: #{$zindex-toast};

SCSS variables

Show code Edit in sandbox

SCSS

        
            
        $toast-max-width: 350px;
        $toast-font-size: 0.875rem;
        $toast-color: null;
        $toast-border-width: $border-width;
        $toast-border-color: var(--#{$prefix}border-color-translucent);
        $toast-spacing: $container-padding-x;
        
        $toast-header-color: $gray-600;
        $toast-header-border-color: rgba($black, 0.05);

        $toast-box-shadow: $box-shadow-4;
        $toast-border-radius: $border-radius-lg;
        $toast-border-bottom-width: $border-width-alternate;
        $toast-background-color: $white;
        $toast-padding-x: 1rem;
        $toast-padding-y: 0.65rem;
        $toast-header-background-color: $white;
        $toast-btn-close-width: 1.3em;
        $toast-btn-close-mr: -0.375rem;
        $toast-btn-close-ml: 0.75rem;