Warning: session_start(): open(/var/lib/php/fpm/session/sess_bie3s7p2sahkb82vvr5omrsufu, O_RDWR) failed: Permission denied (13) 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

Notice: Undefined index: HTTP_REFERER in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Alerts - Bootstrap 5 & Material Design 2.0 components

Alerts MDB Pro component

Alerts - Bootstrap 5 & Material Design 2.0 components

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

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


Basic examples

Click the buttons to launch the alerts


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

          <!-- Alerts -->
          <div
            class="alert fade"
            id="alert-primary"
            role="alert"
            data-color="primary"
            data-position="top-right"
            data-stacking="true"
            data-width="535px"
            data-append-to-body="true"
            data-hidden="true"
            data-autohide="true"
            data-delay="2000"
          >
            A simple primary alert with
            <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div
            class="alert fade"
            id="alert-secondary"
            role="alert"
            data-color="secondary"
            data-position="top-right"
            data-stacking="true"
            data-width="535px"
            data-append-to-body="true"
            data-hidden="true"
            data-autohide="true"
            data-delay="2000"
          >
            A simple secondary alert with
            <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div
            class="alert fade"
            id="alert-success"
            role="alert"
            data-color="success"
            data-position="top-right"
            data-stacking="true"
            data-width="535px"
            data-width="535px"
            data-append-to-body="true"
            data-hidden="true"
            data-autohide="true"
            data-delay="2000"
          >
            A simple success alert with
            <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div
            class="alert fade"
            id="alert-danger"
            role="alert"
            data-color="danger"
            data-position="top-right"
            data-stacking="true"
            data-width="535px"
            data-width="535px"
            data-append-to-body="true"
            data-hidden="true"
            data-autohide="true"
            data-delay="2000"
          >
            A simple danger alert with
            <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div
            class="alert fade"
            id="alert-warning"
            role="alert"
            data-color="warning"
            data-position="top-right"
            data-stacking="true"
            data-width="535px"
            data-width="535px"
            data-append-to-body="true"
            data-hidden="true"
            data-autohide="true"
            data-delay="2000"
          >
            A simple warning alert with
            <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div
            class="alert fade"
            id="alert-info"
            role="alert"
            data-color="info"
            data-position="top-right"
            data-stacking="true"
            data-width="535px"
            data-width="535px"
            data-append-to-body="true"
            data-hidden="true"
            data-autohide="true"
            data-delay="2000"
          >
            A simple info alert with
            <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div
            class="alert fade"
            id="alert-light"
            role="alert"
            data-color="light"
            data-position="top-right"
            data-stacking="true"
            data-width="535px"
            data-width="535px"
            data-append-to-body="true"
            data-hidden="true"
            data-autohide="true"
            data-delay="2000"
          >
            A simple light alert with
            <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
          <div
            class="alert fade"
            id="alert-dark"
            role="alert"
            data-color="dark"
            data-position="top-right"
            data-stacking="true"
            data-width="535px"
            data-width="535px"
            data-append-to-body="true"
            data-hidden="true"
            data-autohide="true"
            data-delay="2000"
          >
            A simple dark alert with
            <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
        

          const triggers = [
            'primary',
            'secondary',
            'success',
            'danger',
            'warning',
            'info',
            'light',
            'dark',
          ];
          const instances = [
            'alert-primary',
            'alert-secondary',
            'alert-success',
            'alert-danger',
            'alert-warning',
            'alert-info',
            'alert-light',
            'alert-dark',
          ];
      
          triggers.forEach(function (trigger, index) {
            let instance = mdb.Alert.getInstance(document.getElementById(instances[index]));
            document.getElementById(trigger).addEventListener('click', function () {
              instance.show();
            });
          });
        

Static examples


          <div class="alert" role="alert" data-color="primary">
            A simple primary alert—check it out!
          </div>
          <div class="alert" role="alert" data-color="secondary">
            A simple secondary alert—check it out!
          </div>
          <div class="alert" role="alert" data-color="success">
            A simple success alert—check it out!
          </div>
          <div class="alert" role="alert" data-color="danger">
            A simple danger alert—check it out!
          </div>
          <div class="alert" role="alert" data-color="warning">
            A simple warning alert—check it out!
          </div>
          <div class="alert" role="alert" data-color="info">
            A simple info alert—check it out!
          </div>
          <div class="alert" role="alert" data-color="light">
            A simple light alert—check it out!
          </div>
          <div class="alert" role="alert" data-color="dark">
            A simple dark alert—check it out!
          </div>
        


Additional Content


          <div class="alert" role="alert" data-color="success">
            <h4 class="alert-heading">Well done!</h4>
            <p>
              Aww yeah, you successfully read this important alert message. This example text is
              going to run a bit longer so that you can see how spacing within an alert works with
              this kind of content.
            </p>
            <hr />
            <p class="mb-0">
              Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
            </p>
          </div>
        

Dismissing

Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:

  • Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
  • Add a close button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the close button.
  • On the close button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the button element with it for proper behavior across all devices.
  • To animate alerts when dismissing them, be sure to add the .fade and .show classes.

You can see this in action with a live demo:


          <div class="alert alert-dismissible fade show" role="alert" data-color="warning">
            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        

Show

You can manually show alert using show() method.


          <div
            class="alert fade"
            id="show-example"
            data-hidden="true"
            role="alert"
            data-color="primary"
          >
            Hidden alert!
          </div>
        

          mdb.Alert.getInstance(document.getElementById('show-example')).show();
        

Hide

You can manually hide alert using hide() method.


          <div class="alert fade show mt-3" id="hide-example" role="alert" data-color="primary">
            Hide me!
          </div>
        

          mdb.Alert.getInstance(document.getElementById('hide-example')).hide();
        

Placement

You can set the position of every alert using the data-position attribute.

Select horizontal / vertical alignment

Current position: top-right

          <div
            class="alert fade show mt-3"
            id="placement-example"
            data-position="top-right"
            data-hidden="true"
            data-width="25%"
            role="alert"
            data-color="primary"
          >
            Show me wherever you want!
          </div>
        

          mdb.Alert.getInstance(document.getElementById('placement-example')).show();
        

Container

You can display an alert anywhere. Just put it in your target element and fill the data-container attribute with id or class of parent.


          <div
            class="alert fade"
            id="container-example"
            role="alert"
            data-container="#parent-container-example"
            data-color="primary"
          >
            Hello from parent element!
          </div>
        

          mdb.Alert.getInstance(document.getElementById('container-example')).show();
        

Offset

You can set offset of your alert using a data-offset tag.


          <div
            class="alert fade"
            id="offset-example"
            data-hidden="true"
            data-offset="100"
            role="alert"
            data-color="primary"
          >
            Offset: 100px
          </div>
        

          mdb.Alert.getInstance(document.getElementById('offset-example')).show();
        

Stacking

You can turn on stacking your alerts using the data-stacking attribute.


          <div
            class="alert fade"
            id="stacking-first-example"
            role="alert"
            data-stacking="true"
            data-color="primary"
          >
            First stacking example
          </div>
          <div
            class="alert fade"
            id="stacking-second-example"
            role="alert"
            data-stacking="true"
            data-color="primary"
          >
            Second stacking example
          </div>
        

          mdb.Alert.getInstance(document.getElementById('stacking-first-example')).show();
          mdb.Alert.getInstance(document.getElementById('stacking-second-example')).show();
        

Alerts - API


Usage

Via data attributes


          <div class="alert alert-warning alert-dismissible fade show" role="alert">
            ...
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        

Via JavaScript

 
          const alert = new mdb.Alert(document.getElementById('my-alert'));
          alert.close();
        

Via jQuery

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


          $('.example-class').alert();
        

Methods

Name Description Example
close Closes an alert by removing it from the DOM. instance.close()
dispose Destroys an element’s tab. instance.dispose()

          const alert = new mdb.Alert(document.getElementById('my-alert'));
          alert.close();
        

Events

Event type Description
close.bs.alert Fires immediately when the close instance method is called.
closed.bs.alert Fired when the alert has been closed and CSS transitions have completed.
 
          const instance = document.getElementById('my-alert')
          instance.addEventListener('closed.bs.alert', () => {
            // ...
          })
        

Import

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


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