Warning: session_start(): open(/var/lib/php/fpm/session/sess_79jcb1unagscdpfodo6kt4kfvu, O_RDWR) failed: No such file or directory (2) in /var/www/acc01/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/acc01/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Bootstrap Sidebar / SideNav - examples, tutorial & advanced usage - Material Design for Bootstrap
web
mobile

SideNav MDB Pro component

Bootstrap sidenav

Bootstrap's sidenav is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.

By virtue of its clarity and simplicity it remarkably increases the User Experience. It allows you to navigate through small applications as well as vast portals swiftly. Its multiple link embedding functionality enables you to implement more advanced content categorisation, which is almost essential within bigger projects.

Thanks to MDB you can easily implement SideNav in your own projects, by using one of various, alluring Side Menus.

This documentation may contain syntax introduced in the MDB 4.19.0 and can be incompatible with previous versions. For old SideNav documentation please follow the link.

Navigation on the left is a live demo of SideNav.


Mobile version:


SideNav examples

Links to images in our mdb server

Usage of classes sn-bg-1, sn-bg-2, sn-bg-3, sn-bg-4, sn-bg-5 links to photos from our mdb server.

Click on the images below to see live preview


Basic usage

Initialization required

To make sure that SideNav works properly you have to initialize it first with the code below:

Initialization code and HTML structure:

Place the JavaScript code below <script type="text/javascript" src="js/mdb.min.js"></script> in the scripts section of your project.



        $(document).ready(function() {
        // SideNav Button Initialization
        $(".button-collapse").sideNav2();
        // SideNav Scrollbar Initialization
        var sideNavScrollbar = document.querySelector('.custom-scrollbar');
        var ps = new PerfectScrollbar(sideNavScrollbar);
        });

      


        <!-- SideNav slide-out button -->
        <a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i
            class="fas fa-bars"></i></a>

        <!-- Sidebar navigation -->
        <div id="slide-out" class="side-nav2 side">
          <ul class="custom-scrollbar">
            <!-- Logo -->
            <li>
              <div class="logo-wrapper waves-light">
                <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                    class="img-fluid flex-center"></a>
              </div>
            </li>
            <!--/. Logo -->
            <!--Social-->
            <li>
              <ul class="social">
                <li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
                <li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
                <li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>
                <li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
              </ul>
            </li>
            <!--/Social-->
            <!--Search Form-->
            <li>
              <form class="search-form" role="search">
                <div class="form-group md-form mt-0 pt-1 waves-light">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
              </form>
            </li>
            <!--/.Search Form-->
            <!-- Side navigation links -->
            <li>
              <ul class="collapsible collapsible-accordion">
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i> Submit
                    blog<i class="fas fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul>
                      <li><a href="#" class="waves-effect">Submit listing</a>
                      </li>
                      <li><a href="#" class="waves-effect">Registration form</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-hand-pointer"></i>
                    Instruction<i class="fas fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul>
                      <li><a href="#" class="waves-effect">For bloggers</a>
                      </li>
                      <li><a href="#" class="waves-effect">For authors</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> About<i
                      class="fas fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul>
                      <li><a href="#" class="waves-effect">Introduction</a>
                      </li>
                      <li><a href="#" class="waves-effect">Monthly meetings</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact me<i
                      class="fas fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul>
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </li>
            <!--/. Side navigation links -->
          </ul>
          <div class="sidenav-bg rgba-blue-strong"></div>
        </div>
        <!--/. Sidebar navigation -->

      

Slide out button

The slide out button is a trigger that launches a SideNav when it's hidden. You can place it wherever you want you just need to add the .button-collapse class and data-activates="slide-out" attribute to the chosen element.


Options


        $(document).ready(function() {
        // SideNav Default Options
        $('.button-collapse').sideNav({
        edge: 'left', // Choose the horizontal origin
        closeOnClick: false, // Closes side-nav on &lt;a&gt; clicks, useful for Angular/Meteor
        breakpoint: 1440, // Breakpoint for button collapse
        menuWidth: 240, // Width for sidenav
        timeDurationOpen: 500, // Time duration open menu
        timeDurationClose: 500, // Time duration open menu
        timeDurationOverlayOpen: 200, // Time duration open overlay
        timeDurationOverlayClose: 200, // Time duration close overlay
        easingOpen: 'easeInOutQuad', // Open animation
        easingClose: 'easeInOutQuad', // Close animation
        showOverlay: true, // Display overflay
        showCloseButton: false // Append close button into siednav
        slim: false, // turn on slime mode
        onOpen: null, // callback function
        onClose: null, // callback function
        mode: over // change sidenav mode
        });
        });
      

jQuery Methods


        $(document).ready(function() {
        // Show sideNav
        $('.button-collapse').sideNav2('show');
        // Hide sideNav
        $('.button-collapse').sideNav2('hide');
        });

      

Customization


Changing the mask

You can use more than 50 rgba colors from our Material Palette just by adding a proper color class.

In the example below we've added a .rgba-blue-strong color class


        <div class="sidenav-bg rgba-blue-strong"></div>
      

Changing the color

You can use each of 300 colors from our Material Palette just by adding a proper color class.

In the example below we've added a .purple color class and .darken-4 to make the color 4 levels darker.


        <!-- SideNav Menu -->
        <ul id="slide-out" class="side-nav fixed purple darken-4 custom-scrollbar">
      

Light /dark background

Depending on whether a light or dark background is used, you may need to set a proper contrast for links and other SideNav's elements.

You may use .side-nav-light for light backgrounds.



        <ul id="slide-out" class="side-nav side-nav-light">

      

Gradient / images / masks

For gradients, images or masks use our predefined Skins


Slim side-nav



        <!-- SideNav slide-out button -->
        <a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i
          class="fas fa-bars"></i></a>

        <!-- Sidebar navigation -->
          <div id="slide-out" class="side-nav side wide sn-bg-1">
            <ul class="custom-scrollbar">
              <!-- Logo -->
              <li>
                <div class="logo-wrapper sn-ad-avatar-wrapper">
                  <a href="#"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle"><span>Anna Deynah</span></a>
                </div>
              </li>
              <!--/. Logo -->
              <!-- Side navigation links -->
              <li>
                <ul class="collapsible collapsible-accordion">
                  <li><a class="collapsible-header waves-effect arrow-r active"><i class="sv-slim-icon fas fa-chevron-right"></i> Submit blog<i class="fas fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                      <ul>
                        <li><a href="#" class="waves-effect active">
                          <span class="sv-slim"> SL </span>
                          <span class="sv-normal">Submit listing</span></a>
                        </li>
                        <li><a href="#" class="waves-effect">
                          <span class="sv-slim"> RF </span>
                          <span class="sv-normal">Registration form</span></a>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li><a class="collapsible-header waves-effect arrow-r"><i class="sv-slim-icon far fa-hand-point-right"></i> Instruction<i class="fas fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                      <ul>
                        <li><a href="#" class="waves-effect">
                          <span class="sv-slim"> FB </span>
                          <span class="sv-normal">For bloggers</span></a>
                        </li>
                        <li><a href="#" class="waves-effect">
                          <span class="sv-slim"> FA </span>
                          <span class="sv-normal">For authors</span></a>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li><a class="collapsible-header waves-effect arrow-r"><i class="sv-slim-icon fas fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                      <ul>
                        <li><a href="#" class="waves-effect">
                          <span class="sv-slim"> I </span>
                          <span class="sv-normal">Introduction</span></a>
                        </li>
                        <li><a href="#" class="waves-effect">
                          <span class="sv-slim"> MM </span>
                          <span class="sv-normal">Monthly meetings</span></a>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li><a class="collapsible-header waves-effect arrow-r"><i class="sv-slim-icon far fa-envelope"></i> Contact me<i class="fas fa-angle-down rotate-icon"></i></a>
                    <div class="collapsible-body">
                      <ul>
                        <li><a href="#" class="waves-effect">
                          <span class="sv-slim"> F </span>
                          <span class="sv-normal">FAQ</span></a>
                        </li>
                        <li><a href="#" class="waves-effect">
                          <span class="sv-slim"> W </span>
                          <span class="sv-normal">Write a message</span></a>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li><a id="toggle" class="waves-effect"><i class="sv-slim-icon fas fa-angle-double-left"></i>Minimize menu</a>
                  </li>
                </ul>
              </li>
              <!--/. Side navigation links -->
            </ul>
            <div class="sidenav-bg rgba-blue-strong"></div>
          </div>

      


        $(document).ready(function() {
          // SideNav Button Initialization
          $(".button-collapse").sideNav2({
            slim: true
          });
          // SideNav Scrollbar Initialization
          var sideNavScrollbar = document.querySelector('.custom-scrollbar');
          var ps = new PerfectScrollbar(sideNavScrollbar);
        })

      

Sidenav with simple items



        <!-- SideNav slide-out button -->
        <a href="#" data-activates="slide-out" class="btn btn-dark p-3 button-collapse"><i
          class="fas fa-bars"></i></a>

          <!-- SideNav slide-out button -->
          <a href="#" data-activates="slide-out" class="btn btn-dark p-3 button-collapse"><i
            class="fas fa-bars"></i></a>

          <!-- Sidebar navigation -->
          <div id="slide-out" class="side-nav2 side special-color-dark">
            <ul class="custom-scrollbar">
              <!-- Logo -->
              <li>
                <div class="logo-wrapper waves-light">
                  <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                      class="img-fluid flex-center"></a>
                </div>
              </li>
              <!--/. Logo -->
              <!--Social-->
              <li>
                <ul class="social">
                  <li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
                  <li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
                  <li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>
                  <li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
                </ul>
              </li>
              <!--/Social-->
              <!--Search Form-->
              <li>
                <form class="search-form" role="search">
                  <div class="form-group md-form mt-0 pt-1 waves-light">
                    <input type="text" class="form-control" placeholder="Search">
                  </div>
                </form>
              </li>
              <!--/.Search Form-->
              <!-- Side navigation links -->
              <li>
                <ul class="collapsible collapsible-accordion">
                  <li><a class="collapsible-header waves-effect"><i class="fas fa-chevron-right"></i> Submit
                      blog</a>
                  </li>
                  <li><a class="collapsible-header waves-effect"><i class="far fa-hand-pointer"></i>
                      Instruction</a>
                  </li>
                  <li><a class="collapsible-header waves-effect"><i class="fas fa-eye"></i> About</a>
                  </li>
                  <li><a class="collapsible-header waves-effect"><i class="far fa-envelope"></i> Contact me</a>
                  </li>
                </ul>
              </li>
              <!--/. Side navigation links -->
            </ul>
            <div class="sidenav-bg"></div>
          </div>
          <!--/. Sidebar navigation -->

      


        $(document).ready(function() {
          // SideNav Button Initialization
          $(".button-collapse").sideNav2();
          // SideNav Scrollbar Initialization
          var sideNavScrollbar = document.querySelector('.custom-scrollbar');
          var ps = new PerfectScrollbar(sideNavScrollbar);
        });

      

Sidenav with open item by default



        <body>
          <div class="bg">
            <!-- SideNav slide-out button -->
            <a href="#" data-activates="slide-out" class="btn btn-dark p-3 button-collapse"><i
            class="fas fa-bars"></i></a>
          </div>
        
        
        <!-- Sidebar navigation -->
        <div id="slide-out" class="side-nav2 side stylish-color">
          <ul class="custom-scrollbar">
            <!-- Logo -->
            <li>
              <div class="logo-wrapper waves-light">
                <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png"
                    class="img-fluid flex-center"></a>
              </div>
            </li>
            <!--/. Logo -->
            <!--Social-->
            <li>
              <ul class="social">
                <li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
                <li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
                <li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>
                <li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
              </ul>
            </li>
            <!--/Social-->
            <!--Search Form-->
            <li>
              <form class="search-form" role="search">
                <div class="form-group md-form mt-0 pt-1 waves-light">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
              </form>
            </li>
            <!--/.Search Form-->
            <!-- Side navigation links -->
            <li>
              <ul class="collapsible collapsible-accordion">
                <li><a class="collapsible-header waves-effect arrow-r active"><i class="fas fa-chevron-right"></i> Submit
                    blog<i class="fas fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul>
                      <li><a href="#" class="waves-effect">Submit listing</a>
                      </li>
                      <li><a href="#" class="waves-effect">Registration form</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-hand-pointer"></i>
                    Instruction<i class="fas fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul>
                      <li><a href="#" class="waves-effect">For bloggers</a>
                      </li>
                      <li><a href="#" class="waves-effect">For authors</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> About<i
                      class="fas fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul>
                      <li><a href="#" class="waves-effect">Introduction</a>
                      </li>
                      <li><a href="#" class="waves-effect">Monthly meetings</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact me<i
                      class="fas fa-angle-down rotate-icon"></i></a>
                  <div class="collapsible-body">
                    <ul>
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                      <li><a href="#" class="waves-effect">FAQ</a>
                      </li>
                      <li><a href="#" class="waves-effect">Write a message</a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </li>
            <!--/. Side navigation links -->
          </ul>
          <div class="sidenav-bg"></div>
        </div>
        <!--/. Sidebar navigation -->
        </body>
        


      


        $(document).ready(() => {
          // SideNav Button Initialization
          $(".button-collapse").sideNav2();
          // SideNav Scrollbar Initialization
          var sideNavScrollbar = document.querySelector('.custom-scrollbar');
          var ps = new PerfectScrollbar(sideNavScrollbar);
        });

      


        body, html {
          height: 100%;
        }
        .bg {
          /* The image used */
          background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
        
          /* Full height */
          height: 100%;
        
          /* Center and scale the image nicely */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }

      

Layouts & Skins

MDB provides you with multiple useful, ready-to-use page layouts with various predefined navigation types.

Navigation layouts

Read more

Skins

Read more

Getting started: download & setup


Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 5,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

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
  

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now