Rate this docs

Animations

Bootstrap animations

Bootstrap animations are illusions of motions for web elements. +70 animations generated by CSS only, work properly on every browser.


Transparent MDB Logo

Select an animation


Basic usage

Using our animation is simple.

Step 1: Add the class .animated to the element you want to animate.

Step 2: Add one of the following classes:

  1. .bounce
  2. .flash
  3. .pulse
  4. .rubberBand
  5. .shake
  6. .headShake
  7. .swing
  8. .tada
  9. .wobble
  10. .jello
  11. .jackInTheBox
  12. .heartBeat
  13. .bounceIn
  14. .bounceInDown
  15. .bounceInLeft
  16. .bounceInRight
  17. .bounceInUp
  18. .bounceOut
  19. .bounceOutDown
  20. .bounceOutLeft
  21. .bounceOutRight
  22. .bounceOutUp
  23. .fadeIn
  24. .fadeInDown
  25. .fadeInDownBig
  26. .fadeInLeft
  27. .fadeInLeftBig
  28. .fadeInRight
  29. .fadeInRightBig
  30. .fadeInUp
  31. .fadeInUpBig
  32. .fadeOut
  33. .fadeOutDown
  34. .fadeOutDownBig
  35. .fadeOutLeft
  36. .fadeOutLeftBig
  37. .fadeOutRight
  38. .fadeOutRightBig
  39. .fadeOutUp
  40. .fadeOutUpBig
  41. .flipInX
  42. .flipInY
  43. .flipOutX
  44. .flipOutY
  45. .lightSpeedIn
  46. .lightSpeedOut
  47. .rotateIn
  48. .rotateInDownLeft
  49. .rotateInDownRight
  50. .rotateInUpLeft
  51. .rotateInUpRight
  52. .rotateOut
  53. .rotateOutDownLeft
  54. .rotateOutDownRight
  55. .rotateOutUpLeft
  56. .rotateOutUpRight
  57. .hinge
  58. .rollIn
  59. .rollOut
  60. .zoomIn
  61. .zoomInDown
  62. .zoomInLeft
  63. .zoomInRight
  64. .zoomInUp
  65. .zoomOut
  66. .zoomOutDown
  67. .zoomOutLeft
  68. .zoomOutRight
  69. .zoomOutUp
  70. .slideInDown
  71. .slideInLeft
  72. .slideInRight
  73. .slideInUp
  74. .slideOutDown
  75. .slideOutLeft
  76. .slideOutRight
  77. .slideOutUp

Step 3 (additionally): You may also want to include slow, fast or delay classes or the infinite class for an infinite loop.

Transparent MDB Logo

Select an option

Add one of the following classes:

  1. .fast
  2. .faster
  3. .slow
  4. .slower
  5. .delay-1s
  6. .delay-2s
  7. .delay-3s
  8. .delay-4s
  9. .delay-5s
  10. .infinite

Advanced usage

You can do a whole bunch of other stuff with animations when you combine it with jQuery or add your own CSS rules.

1. Dynamically add animations using jQuery with ease:


        $('#yourElement').addClass('animated bounceOutLeft');
      

2. You can also detect when an animation ends:


        $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
      

Note: jQuery.one() is used when you want to execute the event handler at most once. More information here.


3. You can also extend jQuery to add a function that does it all for you:


        #yourElement {
          -vendor-animation-duration: 3s;
          -vendor-animation-delay: 2s;
          -vendor-animation-iteration-count: infinite;
        }
      

Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc).


Reveal Animations When Scrolling

Thanks to MDB you can easily launch an animation on page scroll.

A view on mountains.
Cottage on a lake surrounded by mountains.
Cyclist riding down the mountain path.
View on mountains from mountain top.
Rocky shore in the morning.
Rocky shore in the morning.

Basic usage

Step 1: Initialize script for animations on a scroll.


        new WOW().init();
      

Step 2: Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.


        <img src="..." class="wow">
      

Step 3: Pick an animation style from the list of animations , then add the CSS class to the HTML element.


        <img src="..." class="wow fadeInUp">
      

Adding multiple animations via jQuery

If you want to use the same animation trough the entire page, you can use jQuery addClass() to make it at once.


        $( ".wow" ).addClass( "fadeInUp" );
      

visibility: hidden;

Add visibility: hidden to the wow if you want to animate the element which is visible immediately after page load. Thanks to that you avoid reloading the content after javascript load.


        .wow {
          visibility: hidden;
        }
      

Options

Use one of the custom attributes below to change the behavior of the animations on a scroll.

  1. data-wow-duration: Change the animation duration

  2. data-wow-delay: Delay before the animation starts

  3. data-wow-offset: Distance to start the animation (related to the browser bottom)

  4. data-wow-iteration: Number of times the animation will be repeated


        <img src="..." class="wow fadeInUp" data-wow-delay="0.6s">
      

Customize Settings

  1. boxClass: Class name that reveals the hidden box when user scrolls

  2. animateClass: Class name that triggers the CSS animations

  3. offset: Define the distance between the bottom of browser viewport and the top of the hidden box. When the user scrolls and reaches this distance, the hidden box is revealed.

  4. mobile: Turn on/off animations on mobile devices.

  5. live: constantly check for new animated elements on the page


        wow = new WOW({
            boxClass: 'wow', // default
            animateClass: 'animated', // default
            offset: 0, // default
            mobile: true, // default
            live: true // default
        })
        wow.init();
      

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