Warning: session_start(): open(/var/lib/php/fpm/session/sess_gkt2ph8lmuks0avd1ta4q34std, O_RDWR) failed: No such file or directory (2) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/tst02/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64
Toasts - Bootstrap 5 & Material Design 2.0 components

Toasts MDB Pro component

Toasts - Bootstrap 5 & Material Design 2.0 components

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


          <div
            class="toast show fade mx-auto"
            id="basic-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-autohide="false"
          >
            <div class="toast-header">
              <strong class="mr-auto">MDBootstrap</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">
              Basic Example
            </div>
          </div>
        

          const instance = mdb.Toast.getInstance(document.getElementById('example'));
          instance.show();
        

Colors


          <div class="row mb-5">
            <div class="col-md-3">
              <div
                class="toast show fade text-white"
                role="alert"
                aria-live="assertive"
                aria-atomic="true"
                data-color="info"
              >
                <div class="toast-header text-white">
                  <i class="fas fa-info-circle fa-lg mr-2"></i>
                  <strong class="mr-auto">MDBootstrap</strong>
                  <small>11 mins ago</small>
                  <button
                    type="button"
                    class="ml-2 my-1 close text-white"
                    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>
            </div>
            <div class="col-md-3">
              <div
                class="toast show fade text-white"
                role="alert"
                aria-live="assertive"
                aria-atomic="true"
                data-color="warning"
              >
                <div class="toast-header text-white">
                  <i class="fas fa-exclamation-triangle fa-lg mr-2"></i>
                  <strong class="mr-auto">MDBootstrap</strong>
                  <small>11 mins ago</small>
                  <button
                    type="button"
                    class="ml-2 my-1 close text-white"
                    data-dismiss="toast"
                    aria-label="Close"
                    data-container="#colors-container"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="toast-body">
                  Hello, world! This is a toast message.
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div
                class="toast show fade text-white"
                role="alert"
                aria-live="assertive"
                aria-atomic="true"
                data-color="success"
              >
                <div class="toast-header text-white">
                  <i class="fas fa-check fa-lg mr-2"></i>
                  <strong class="mr-auto">MDBootstrap</strong>
                  <small>11 mins ago</small>
                  <button
                    type="button"
                    class="ml-2 my-1 close text-white"
                    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>
            </div>
            <div class="col-md-3">
              <div
                class="toast show fade text-white"
                role="alert"
                aria-live="assertive"
                aria-atomic="true"
                data-color="danger"
              >
                <div class="toast-header text-white">
                  <i class="fas fa-exclamation-circle fa-lg mr-2"></i>
                  <strong class="mr-auto">MDBootstrap</strong>
                  <small>11 mins ago</small>
                  <button
                    type="button"
                    class="ml-2 my-1 close text-white"
                    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>
            </div>
          </div>
        

          const instance = mdb.Toast.getInstance(document.getElementById('example'));
          instance.update({ color: 'info / warning / success / danger', });
        

Placement

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

Select horizontal / vertical alignment

Current position: top-right

          <div
            class="toast text-white"
            id="placement-example-toast"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-autohide="false"
            data-position="..."
          >
            <div class="toast-header text-white">
              <strong class="mr-auto">MDBootstrap</strong>
              <small>11 mins ago</small>
              <button
                type="button"
                class="ml-2 mb-1 close text-white"
                data-dismiss="toast"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </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-offset attribute or update() method.


          <div
            class="toast text-white"
            id="offset-toast"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-autohide="false"
            data-offset="..."
            data-color="info"
          >
            <div class="toast-header text-white">
              <strong class="mr-auto">MDBootstrap</strong>
              <small>11 mins ago</small>
              <button
                type="button"
                class="ml-2 mb-1 close text-white"
                data-dismiss="toast"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </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-container attribute with id or class of parent or update() method.


          <div id="parent">
            <div
              class="toast"
              id="container-example-toast"
              role="alert"
              aria-live="assertive"
              aria-atomic="true"
              data-autohide="false"
              data-container="..."
            >
              <div class="toast-header">
                <svg
                  class="bd-placeholder-img rounded mr-2"
                  width="20"
                  height="20"
                  xmlns="http://www.w3.org/2000/svg"
                  preserveAspectRatio="xMidYMid slice"
                  role="img"
                  focusable="false"
                >
                  <rect width="100%" height="100%" fill="#007aff"></rect>
                </svg>
                <strong class="mr-auto">MDBootstrap</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">
                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-stacking attribute or update() method.


          <div
            class="toast text-white"
            id="stacking-toast-one"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-autohide="true"
            data-delay="2000"
            data-position="top-right"
            data-color="info"
          >
            <div class="toast-header text-white">
              <strong class="mr-auto">MDBootstrap</strong>
              <small>11 mins ago</small>
              <button
                type="button"
                class="ml-2 mb-1 close text-white"
                data-dismiss="toast"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="toast-body">
              First stacking element
            </div>
          </div>
          <div
            class="toast text-white"
            id="stacking-toast-two"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-autohide="true"
            data-delay="2000"
            data-position="top-right"
            data-color="info"
          >
            <div class="toast-header text-white">
              <strong class="mr-auto">MDBootstrap</strong>
              <small>11 mins ago</small>
              <button
                type="button"
                class="ml-2 mb-1 close text-white"
                data-dismiss="toast"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="toast-body">
              Second stacking element
            </div>
          </div>
        

          const instance = mdb.Toast.getInstance(document.getElementById('stacking-toast-one'));
          const secondInstance =
          mdb.Toast.getInstance(document.getElementById('stacking-toast-two')); instance.update({
          stacking: true, }); secondInstance.update({ stacking: true, });
        

Toasts - API


Usage

Via JavaScript:


          var toastElList = [].slice.call(document.querySelectorAll('.toast'))
          var toastList = toastElList.map(function (toastEl) {
            return new mdb.Toast(toastEl, option)
          })
        

Making popovers work for keyboard and assistive technology users

To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <span>s) can be made focusable by adding the tabindex="0" attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover’s content in this situation. Additionally, do not rely solely on hover as the trigger for your popovers, as this will make them impossible to trigger for keyboard users.

While you can insert rich, structured HTML in popovers with the html option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the aria-describedby attribute. As a result, the entirety of the popover’s content will be announced to assistive technology users as one long, uninterrupted stream.

Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the whiteList or allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document’s structure, there is no guarantee that moving forward/pressing TAB will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead.


Options

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

Name Type Default Description
animation boolean true Apply a CSS fade transition to the toast
autohide boolean true Auto hide the toast
content number 500 Delay hiding the toast (ms)

Methods

Asynchronous methods and transitions:
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Method Description
show Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.
hide Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.
dispose Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

        var exampleTriggerEl = document.getElementById('example')
        var toast = new mdb.Toast(exampleTriggerEl)
        toast.show()
      

Events

Event type Description
show.bs.toast This event fires immediately when the show instance method is called.
shown.bs.toast This event is fired when the toast has been made visible to the user.
hide.bs.toast This event is fired immediately when the hide instance method has been called.
hidden.bs.toast This event is fired when the toast has finished being hidden from the user.

          var myToastEl = document.getElementById('myToast')
          myToastEl.addEventListener('hidden.bs.toast', function () {
            // do something...
          })
        

Import

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


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