Alert

Bootstrap Alert

Bootstrap alerts are feedback messages which are displayed after specific actions preceded by the user. Length of the text is not limited.

With the right use of colors, they add some emotional weight to our information, ranging from a simple warning to critical system failure or from an operation success to a neutral information.

Additional resources: Have a look at our tutorial about Web Push alerts


Basic examples

Default alerts

Default styling for Bootstrap Alert component



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

      

Material alerts MDB Pro component

Material Design styling for Bootstrap Alert component

Info message Warning message Success message Error message


        <!-- Live preview-->
        <a class="btn btn-info" onclick="toastr.info('Hi! I am info message.');">Info message</a>
        <a class="btn btn-warning" onclick="toastr.warning('Hi! I am warning message.');">Warning message</a>
        <a class="btn btn-success" onclick="toastr.success('Hi! I am success message.');">Success message</a>
        <a class="btn btn-danger" onclick="toastr.error('Hi! I am error message.');">Error message</a>

      


Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.



        <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

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 dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
  • On the dismiss 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-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>

      

Usage Material alert via jQuery MDB Pro component

Click me!


        <a class="btn btn-info btn-lg" id="alert-target" >Click me!</a>

      


        $("#alert-target").click(function () {
            toastr["info"]("I was launched via jQuery!")
        });

      

Material alert options

Default options



        toastr.options = {
            "closeButton": true, // true/false
            "debug": false, // true/false
            "newestOnTop": false, // true/false
            "progressBar": false, // true/false
            "positionClass": "toast-top-right", // toast-top-right / toast-top-left / toast-bottom-right / toast-bottom-left
            "preventDuplicates": false, true/false
            "onclick": null,
            "showDuration": "300", // in milliseconds
            "hideDuration": "1000", // in milliseconds
            "timeOut": "5000", // in milliseconds
            "extendedTimeOut": "1000", // in milliseconds
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }

      

Other options



        // Display a warning toast, with no title
        toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')

        // Display a success toast, with a title
        toastr.success('Have fun storming the castle!', 'Miracle Max Says')

        // Display an error toast, with a title
        toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')

        // Immediately remove current toasts without using animation
        toastr.remove()

        // Remove current toasts using animation
        toastr.clear()

        // Override global options
        toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})

      

Alert creator MDB Pro component

toastr creator

Toast Type
Position


            


        toastr.options = {
          "closeButton": false,
          "debug": false,
          "newestOnTop": false,
          "progressBar": false,
          "positionClass": "toast-top-right",
          "preventDuplicates": false,
          "onclick": null,
          "showDuration": 300,
          "hideDuration": 1000,
          "timeOut": 5000,
          "extendedTimeOut": 1000,
          "showEasing": "swing",
          "hideEasing": "linear",
          "showMethod": "fadeIn",
          "hideMethod": "fadeOut"
        }

      

Getting started : download & setup


Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue