Rate this docs

Social buttons

Bootstrap social buttons

Bootstrap social buttons are buttons which are dedicated for social media usage. Font Awesome covers icons for all major platforms.

Hard to imagine a good website or app without integration with Social Media.

With MDB it's child's play. We provide you buttons for the most popular social networks.

They work the same way as regular buttons. If you need more information about regular buttons, be sure to read our Buttons Documentation.


Various sizes of buttons and icons

22 22 22 22





22 22 22 22





        <!--Stack Overflow-->
        <button type="button" class="btn btn-lg btn-so">
          <i class="fa fa-stack-overflow pr-1"></i>
          <span>Stack Overflow</span>
        </button>
        <span class="counter">22</span>

        <!--Stack Overflow-->
        <button type="button" class="btn btn-so">
          <i class="fa fa-stack-overflow pr-1"></i>
          <span>Stack Overflow</span>
        </button>
        <span class="counter">22</span>

        <!--Stack Overflow-->
        <button type="button" class="btn btn-md btn-so">
          <i class="fa fa-stack-overflow pr-1"></i>
          <span>Stack Overflow</span>
        </button>
        <span class="counter">22</span>

        <!--Stack Overflow-->
        <button type="button" class="btn btn-sm btn-so">
          <i class="fa fa-stack-overflow pr-1"></i>
          <span>Stack Overflow</span>
        </button>
        <span class="counter">22</span>

        <!--Facebook-->
        <button type="button" class="btn btn-lg btn-fb"><i class="fa fa-facebook pr-1"></i> Facebook</button>
        <!--Facebook-->
        <button type="button" class="btn btn-fb"><i class="fa fa-facebook pr-1"></i> Facebook</button>
        <!--Facebook-->
        <button type="button" class="btn btn-md btn-fb"><i class="fa fa-facebook pr-1"></i> Facebook</button>
        <!--Facebook-->
        <button type="button" class="btn btn-sm btn-fb"><i class="fa fa-facebook pr-1"></i> Facebook</button>

        <!--Dribbble-->
        <button type="button" class="btn btn-lg btn-dribbble"><i class="fa fa-dribbble"></i></button>
        <!--Dribbble-->
        <button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble"></i></button>
        <!--Dribbble-->
        <button type="button" class="btn btn-md btn-dribbble"><i class="fa fa-dribbble"></i></button>
        <!--Dribbble-->
        <button type="button" class="btn btn-sm btn-dribbble"><i class="fa fa-dribbble"></i></button>

        <!--Slack-->
        <button type="button" class="btn btn-lg btn-slack">
          <i class="fa fa-slack"></i>
        </button>
        <span class="counter">22</span>

        <!--Slack-->
        <button type="button" class="btn btn-slack">
          <i class="fa fa-slack"></i>
        </button>
        <span class="counter">22</span>

        <!--Slack-->
        <button type="button" class="btn btn-md btn-slack">
          <i class="fa fa-slack"></i>
        </button>
        <span class="counter">22</span>

        <!--Slack-->
        <button type="button" class="btn btn-sm btn-slack">
          <i class="fa fa-slack"></i>
        </button>
        <span class="counter">22</span>

        <!--Twitter-->
        <a class="btn-floating btn-lg btn-tw" type="button" role="button"><i class="fa fa-twitter"></i></a>
        <!--Twitter-->
        <a class="btn-floating btn-tw" type="button" role="button"><i class="fa fa-twitter"></i></a>
        <!--Twitter-->
        <a class="btn-floating btn-sm btn-tw" type="button" role="button"><i class="fa fa-twitter"></i></a>

        <!--Reddit-->
        <a class="reddit-ic" role="button"><i class="fa fa-5x fa-reddit-alien px-3"></i></a>
        <!--Reddit-->
        <a class="reddit-ic" role="button"><i class="fa fa-4x fa-reddit-alien pr-3"></i></a>
        <!--Reddit-->
        <a class="reddit-ic" role="button"><i class="fa fa-3x fa-reddit-alien pr-3"></i></a>
        <!--Reddit-->
        <a class="reddit-ic" role="button"><i class="fa fa-2x fa-reddit-alien pr-3"></i></a>
        <!--Reddit-->
        <a class="reddit-ic" role="button"><i class="fa fa-lg fa-reddit-alien pr-3"></i></a>
        <!--Reddit-->
        <a class="reddit-ic" role="button"><i class="fa fa-reddit-alien"></i></a>

      

Full name social buttons MDB Pro component



        <!--Facebook-->
        <button type="button" class="btn btn-fb"><i class="fa fa-facebook pr-1"></i> Facebook</button>
        <!--Twitter-->
        <button type="button" class="btn btn-tw"><i class="fa fa-twitter pr-1"></i> Twitter</button>
        <!--Google +-->
        <button type="button" class="btn btn-gplus"><i class="fa fa-google-plus pr-1"></i> Google +</button>
        <!--Linkedin-->
        <button type="button" class="btn btn-li"><i class="fa fa-linkedin pr-1"></i> Linkedin</button>
        <!--Instagram-->
        <button type="button" class="btn btn-ins"><i class="fa fa-instagram pr-1"></i> Instagram</button>
        <!--Pinterest-->
        <button type="button" class="btn btn-pin"><i class="fa fa-pinterest pr-1"></i> Pinterest</button>
        <!--Vkontakte-->
        <button type="button" class="btn btn-vk"><i class="fa fa-vk pr-1"></i> Vkontakte</button>
        <!--Stack Overflow-->
        <button type="button" class="btn btn-so"><i class="fa fa-stack-overflow pr-1"></i> Stack Overflow</button>
        <!--Youtube-->
        <button type="button" class="btn btn-yt"><i class="fa fa-youtube pr-1"></i> Youtube</button>
        <!--Slack-->
        <button type="button" class="btn btn-slack"><i class="fa fa-slack pr-1"></i> Slack</button>
        <!--Github-->
        <button type="button" class="btn btn-git"><i class="fa fa-github pr-1"></i> Github</button>
        <!--Comments-->
        <button type="button" class="btn btn-comm"><i class="fa fa-comments pr-1"></i> Comments</button>
        <!--Email-->
        <button type="button" class="btn btn-email"><i class="fa fa-envelope pr-1"></i> Email</button>
        <!--Dribbble-->
        <button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble pr-1"></i> Dribbble</button>
        <!--Reddit-->
        <button type="button" class="btn btn-reddit"><i class="fa fa-reddit-alien pr-1"></i> Reddit</button>

      

Simple social buttons MDB Pro component



        <!--Facebook-->
        <button type="button" class="btn btn-fb"><i class="fa fa-facebook"></i></button>
        <!--Twitter-->
        <button type="button" class="btn btn-tw"><i class="fa fa-twitter"></i></button>
        <!--Google +-->
        <button type="button" class="btn btn-gplus"><i class="fa fa-google-plus"></i></button>
        <!--Linkedin-->
        <button type="button" class="btn btn-li"><i class="fa fa-linkedin"></i></button>
        <!--Instagram-->
        <button type="button" class="btn btn-ins"><i class="fa fa-instagram"></i></button>
        <!--Pinterest-->
        <button type="button" class="btn btn-pin"><i class="fa fa-pinterest"></i></button>
        <!--Vkontakte-->
        <button type="button" class="btn btn-vk"><i class="fa fa-vk"></i></button>
        <!--Stack Overflow-->
        <button type="button" class="btn btn-so"><i class="fa fa-stack-overflow"></i></button>
        <!--Youtube-->
        <button type="button" class="btn btn-yt"><i class="fa fa-youtube"></i></button>
        <!--Slack-->
        <button type="button" class="btn btn-slack"><i class="fa fa-slack"></i></button>
        <!--Github-->
        <button type="button" class="btn btn-git"><i class="fa fa-github"></i></button>
        <!--Comments-->
        <button type="button" class="btn btn-comm"><i class="fa fa-comments"></i></button>
        <!--Email-->
        <button type="button" class="btn btn-email"><i class="fa fa-envelope"></i></button>
        <!--Dribbble-->
        <button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble"></i></button>
        <!--Reddit-->
        <button type="button" class="btn btn-reddit"><i class="fa fa-reddit-alien"></i></button>

      

Floating social buttons MDB Pro component



        <!--Facebook-->
        <a class="btn-floating btn-lg btn-fb" type="button" role="button"><i class="fa fa-facebook"></i></a>
        <!--Twitter-->
        <a class="btn-floating btn-lg btn-tw" type="button" role="button"><i class="fa fa-twitter"></i></a>
        <!--Google +-->
        <a class="btn-floating btn-lg btn-gplus" type="button" role="button"><i class="fa fa-google-plus"></i></a>
        <!--Linkedin-->
        <a class="btn-floating btn-lg btn-li" type="button" role="button"><i class="fa fa-linkedin"></i></a>
        <!--Instagram-->
        <a class="btn-floating btn-lg btn-ins" type="button" role="button"><i class="fa fa-instagram"></i></a>
        <!--Pinterest-->
        <a class="btn-floating btn-lg btn-pin" type="button" role="button"><i class="fa fa-pinterest"></i></a>
        <!--Vkontakte-->
        <a class="btn-floating btn-lg btn-vk" type="button" role="button"><i class="fa fa-vk"></i></a>
        <!--Stack Overflow-->
        <a class="btn-floating btn-lg btn-so" type="button" role="button"><i class="fa fa-stack-overflow"></i></a>
        <!--Youtube-->
        <a class="btn-floating btn-lg btn-yt" type="button" role="button"><i class="fa fa-youtube"></i></a>
        <!--Slack-->
        <a class="btn-floating btn-lg btn-slack" type="button" role="button"><i class="fa fa-slack"></i></a>
        <!--Github-->
        <a class="btn-floating btn-lg btn-git" type="button" role="button"><i class="fa fa-github"></i></a>
        <!--Comments-->
        <a class="btn-floating btn-lg btn-comm" type="button" role="button"><i class="fa fa-comments"></i></a>
        <!--Email-->
        <a class="btn-floating btn-lg btn-email" type="button" role="button"><i class="fa fa-envelope"></i></a>
        <!--Dribbble-->
        <a class="btn-floating btn-lg btn-dribbble" type="button" role="button"><i class="fa fa-dribbble"></i></a>
        <!--Reddit-->
        <a class="btn-floating btn-lg btn-reddit" type="button" role="button"><i class="fa fa-reddit-alien"></i></a>

      

Full name social counters MDB Pro component

22 22 22 22 22 22 22 22 22 22 22 22 22 22 22


        <!--Facebook-->
        <button type="button" class="btn btn-fb">
          <i class="fa fa-facebook pr-1"></i>
          <span>Facebook</span>
        </button>
        <span class="counter">22</span>

        <!--Twitter-->
        <button type="button" class="btn btn-tw">
          <i class="fa fa-twitter pr-1"></i>
          <span>Twitter</span>
        </button>
        <span class="counter">22</span>

        <!--Google +-->
        <button type="button" class="btn btn-gplus">
          <i class="fa fa-google-plus pr-1"></i>
          <span>Google+</span>
        </button>
        <span class="counter">22</span>

        <!--Linkedin-->
        <button type="button" class="btn btn-li">
          <i class="fa fa-linkedin pr-1"></i>
          <span>Linkedin</span>
        </button>
        <span class="counter">22</span>

        <!--Instagram-->
        <button type="button" class="btn btn-ins">
          <i class="fa fa-instagram pr-1"></i>
          <span>Instagram</span>
        </button>
        <span class="counter">22</span>

        <!--Pinterest-->
        <button type="button" class="btn btn-pin">
          <i class="fa fa-pinterest pr-1"></i>
          <span>Pinterest</span>
        </button>
        <span class="counter">22</span>

        <!--Vkontakte-->
        <button type="button" class="btn btn-vk">
          <i class="fa fa-vk pr-1"></i>
          <span>Vkontakte</span>
        </button>
        <span class="counter">22</span>

        <!--Stack Overflow-->
        <button type="button" class="btn btn-so">
          <i class="fa fa-stack-overflow pr-1"></i>
          <span>Stack Overflow</span>
        </button>
        <span class="counter">22</span>

        <!--Youtube-->
        <button type="button" class="btn btn-yt">
          <i class="fa fa-youtube pr-1"></i>
          <span>Youtube</span>
        </button>
        <span class="counter">22</span>

        <!--Slack-->
        <button type="button" class="btn btn-slack">
          <i class="fa fa-slack pr-1"></i>
          <span>Slack</span>
        </button>
        <span class="counter">22</span>

        <!--Github-->
        <button type="button" class="btn btn-git">
          <i class="fa fa-github pr-1"></i>
          <span>Github</span>
        </button>
        <span class="counter">22</span>

        <!--Comments-->
        <button type="button" class="btn btn-comm">
          <i class="fa fa-comments pr-1"></i>
          <span>Comments</span>
        </button>
        <span class="counter">22</span>

        <!--Emails-->
        <button type="button" class="btn btn-email">
          <i class="fa fa-envelope pr-1"></i>
          <span>Emails</span>
        </button>
        <span class="counter">22</span>

        <!--Dribbble-->
        <button type="button" class="btn btn-dribbble">
          <i class="fa fa-dribbble pr-1"></i>
          <span>Dribbble</span>
        </button>
        <span class="counter">22</span>

        <!--Reddit-->
        <button type="button" class="btn btn-reddit">
          <i class="fa fa-reddit-alien pr-1"></i>
          <span>Reddit</span>
        </button>
        <span class="counter">22</span>

      

Simple social counters MDB Pro component

22 22 22 22 22 22 22 22 22 22 22 22 22 22 22


        <!--Facebook-->
        <button type="button" class="btn btn-fb">
          <i class="fa fa-facebook"></i>
        </button>
        <span class="counter">22</span>

        <!--Twitter-->
        <button type="button" class="btn btn-tw">
          <i class="fa fa-twitter"></i>
        </button>
        <span class="counter">22</span>

        <!--Google +-->
        <button type="button" class="btn btn-gplus">
          <i class="fa fa-google-plus"></i>
        </button>
        <span class="counter">22</span>

        <!--Linkedin-->
        <button type="button" class="btn btn-li">
          <i class="fa fa-linkedin"></i>
        </button>
        <span class="counter">22</span>

        <!--Instagram-->
        <button type="button" class="btn btn-ins">
          <i class="fa fa-instagram"></i>
        </button>
        <span class="counter">22</span>

        <!--Pinterest-->
        <button type="button" class="btn btn-pin">
          <i class="fa fa-pinterest"></i>
        </button>
        <span class="counter">22</span>

        <!--Vkontakte-->
        <button type="button" class="btn btn-vk">
          <i class="fa fa-vk"></i>
        </button>
        <span class="counter">22</span>

        <!--Stack Overflow-->
        <button type="button" class="btn btn-so">
          <i class="fa fa-stack-overflow"></i>
        </button>
        <span class="counter">22</span>

        <!--Youtube-->
        <button type="button" class="btn btn-yt">
          <i class="fa fa-youtube"></i>
        </button>
        <span class="counter">22</span>

        <!--Slack-->
        <button type="button" class="btn btn-slack">
          <i class="fa fa-slack"></i>
        </button>
        <span class="counter">22</span>

        <!--Github-->
        <button type="button" class="btn btn-git">
          <i class="fa fa-github"></i>
        </button>
        <span class="counter">22</span>

        <!--Comments-->
        <button type="button" class="btn btn-comm">
          <i class="fa fa-comments"></i>
        </button>
        <span class="counter">22</span>

        <!--Emails-->
        <button type="button" class="btn btn-email">
          <i class="fa fa-envelope"></i>
        </button>
        <span class="counter">22</span>

        <!--Dribbble-->
        <button type="button" class="btn btn-dribbble">
          <i class="fa fa-dribbble"></i>
        </button>
        <span class="counter">22</span>

        <!--Reddit-->
        <button type="button" class="btn btn-reddit">
          <i class="fa fa-reddit-alien"></i>
        </button>
        <span class="counter">22</span>

      

Social icons MDB Pro component



        <!--Facebook-->
        <a class="fb-ic mr-3" role="button"><i class="fa fa-lg fa-facebook"></i></a>
        <!--Twitter-->
        <a class="tw-ic mr-3" role="button"><i class="fa fa-lg fa-twitter"></i></a>
        <!--Google +-->
        <a class="gplus-ic mr-3" role="button"><i class="fa fa-lg fa-google-plus"></i></a>
        <!--Linkedin-->
        <a class="li-ic mr-3" role="button"><i class="fa fa-lg fa-linkedin"></i></a>
        <!--Instagram-->
        <a class="ins-ic mr-3" role="button"><i class="fa fa-lg fa-instagram"></i></a>
        <!--Pinterest-->
        <a class="pin-ic mr-3" role="button"><i class="fa fa-lg fa-pinterest"></i></a>
        <!--Vkontakte-->
        <a class="vk-ic mr-3" role="button"><i class="fa fa-lg fa-vk"></i></a>
        <!--Stack Overflow-->
        <a class="so-ic mr-3" role="button"><i class="fa fa-lg fa-stack-overflow"></i></a>
        <!--Youtube-->
        <a class="yt-ic mr-3" role="button"><i class="fa fa-lg fa-youtube"></i></a>
        <!--Slack-->
        <a class="slack-ic mr-3" role="button"><i class="fa fa-lg fa-slack"></i></a>
        <!--Github-->
        <a class="git-ic mr-3" role="button"><i class="fa fa-lg fa-github"></i></a>
        <!--Comments-->
        <a class="comm-ic mr-3" role="button"><i class="fa fa-lg fa-comments"></i></a>
        <!--Email-->
        <a class="email-ic mr-3" role="button"><i class="fa fa-lg fa-envelope-o"></i></a>
        <!--Dribbble-->
        <a class="dribbble-ic mr-3" role="button"><i class="fa fa-lg fa-dribbble"></i></a>
        <!--Reddit-->
        <a class="reddit-ic" role="button"><i class="fa fa-lg fa-reddit-alien"></i></a>

      

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