Alerts

Alerts - Bootstrap 5 & Material Design 2.0 components


Basic example



          <div class="alert alert-primary" role="alert">
            A simple primary alert—check it out!
          </div>


Colors


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


Additional content


  
          <div class="alert alert-success" role="alert">
            <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


  
          <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <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>
  
      

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';