Rate these docs

Social buttons

Bootstrap social buttons

Bootstrap social buttons are buttons which are dedicated to 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="fab 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="fab 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="fab 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="fab 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="fab fa-facebook-f pr-1"></i> Facebook</button>
        <!--Facebook-->
        <button type="button" class="btn btn-fb"><i class="fab fa-facebook-f pr-1"></i> Facebook</button>
        <!--Facebook-->
        <button type="button" class="btn btn-md btn-fb"><i class="fab fa-facebook-f pr-1"></i> Facebook</button>
        <!--Facebook-->
        <button type="button" class="btn btn-sm btn-fb"><i class="fab fa-facebook-f pr-1"></i> Facebook</button>

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

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

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

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

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

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

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

      

Full name social buttons MDB Pro component



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

      

Simple social buttons MDB Pro component



        <!--Facebook-->
        <button type="button" class="btn btn-fb"><i class="fab fa-facebook-f"></i></button>
        <!--Twitter-->
        <button type="button" class="btn btn-tw"><i class="fab fa-twitter"></i></button>
        <!--Google +-->
        <button type="button" class="btn btn-gplus"><i class="fab fa-google-plus-g"></i></button>
        <!--Linkedin-->
        <button type="button" class="btn btn-li"><i class="fab fa-linkedin-in"></i></button>
        <!--Instagram-->
        <button type="button" class="btn btn-ins"><i class="fab fa-instagram"></i></button>
        <!--Pinterest-->
        <button type="button" class="btn btn-pin"><i class="fab fa-pinterest"></i></button>
        <!--Vkontakte-->
        <button type="button" class="btn btn-vk"><i class="fab fa-vk"></i></button>
        <!--Stack Overflow-->
        <button type="button" class="btn btn-so"><i class="fab fa-stack-overflow"></i></button>
        <!--Youtube-->
        <button type="button" class="btn btn-yt"><i class="fab fa-youtube"></i></button>
        <!--Slack-->
        <button type="button" class="btn btn-slack"><i class="fab fa-slack-hash"></i></button>
        <!--Github-->
        <button type="button" class="btn btn-git"><i class="fab fa-github"></i></button>
        <!--Comments-->
        <button type="button" class="btn btn-comm"><i class="fas fa-comments"></i></button>
        <!--Email-->
        <button type="button" class="btn btn-email"><i class="fas fa-envelope"></i></button>
        <!--Dribbble-->
        <button type="button" class="btn btn-dribbble"><i class="fab fa-dribbble"></i></button>
        <!--Reddit-->
        <button type="button" class="btn btn-reddit"><i class="fab 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="fab fa-facebook-f"></i></a>
        <!--Twitter-->
        <a class="btn-floating btn-lg btn-tw" type="button" role="button"><i class="fab fa-twitter"></i></a>
        <!--Google +-->
        <a class="btn-floating btn-lg btn-gplus" type="button" role="button"><i class="fab fa-google-plus-g"></i></a>
        <!--Linkedin-->
        <a class="btn-floating btn-lg btn-li" type="button" role="button"><i class="fab fa-linkedin-in"></i></a>
        <!--Instagram-->
        <a class="btn-floating btn-lg btn-ins" type="button" role="button"><i class="fab fa-instagram"></i></a>
        <!--Pinterest-->
        <a class="btn-floating btn-lg btn-pin" type="button" role="button"><i class="fab fa-pinterest"></i></a>
        <!--Vkontakte-->
        <a class="btn-floating btn-lg btn-vk" type="button" role="button"><i class="fab fa-vk"></i></a>
        <!--Stack Overflow-->
        <a class="btn-floating btn-lg btn-so" type="button" role="button"><i class="fab fa-stack-overflow"></i></a>
        <!--Youtube-->
        <a class="btn-floating btn-lg btn-yt" type="button" role="button"><i class="fab fa-youtube"></i></a>
        <!--Slack-->
        <a class="btn-floating btn-lg btn-slack" type="button" role="button"><i class="fab fa-slack-hash"></i></a>
        <!--Github-->
        <a class="btn-floating btn-lg btn-git" type="button" role="button"><i class="fab fa-github"></i></a>
        <!--Comments-->
        <a class="btn-floating btn-lg btn-comm" type="button" role="button"><i class="fas fa-comments"></i></a>
        <!--Email-->
        <a class="btn-floating btn-lg btn-email" type="button" role="button"><i class="fas fa-envelope"></i></a>
        <!--Dribbble-->
        <a class="btn-floating btn-lg btn-dribbble" type="button" role="button"><i class="fab fa-dribbble"></i></a>
        <!--Reddit-->
        <a class="btn-floating btn-lg btn-reddit" type="button" role="button"><i class="fab 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="fab fa-facebook-f pr-1"></i>
          <span>Facebook</span>
        </button>
        <span class="counter">22</span>

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

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

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

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

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

        <!--Vkontakte-->
        <button type="button" class="btn btn-vk">
          <i class="fab 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="fab 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="fab fa-youtube pr-1"></i>
          <span>Youtube</span>
        </button>
        <span class="counter">22</span>

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

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

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

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

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

        <!--Reddit-->
        <button type="button" class="btn btn-reddit">
          <i class="fab 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="fab fa-facebook-f"></i>
        </button>
        <span class="counter">22</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

        <!--Reddit-->
        <button type="button" class="btn btn-reddit">
          <i class="fab 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="fab fa-lg fa-facebook-f"></i></a>
        <!--Twitter-->
        <a class="tw-ic mr-3" role="button"><i class="fab fa-lg fa-twitter"></i></a>
        <!--Google +-->
        <a class="gplus-ic mr-3" role="button"><i class="fab fa-lg fa-google-plus-g"></i></a>
        <!--Linkedin-->
        <a class="li-ic mr-3" role="button"><i class="fab fa-lg fa-linkedin-in"></i></a>
        <!--Instagram-->
        <a class="ins-ic mr-3" role="button"><i class="fab fa-lg fa-instagram"></i></a>
        <!--Pinterest-->
        <a class="pin-ic mr-3" role="button"><i class="fab fa-lg fa-pinterest"></i></a>
        <!--Vkontakte-->
        <a class="vk-ic mr-3" role="button"><i class="fab fa-lg fa-vk"></i></a>
        <!--Stack Overflow-->
        <a class="so-ic mr-3" role="button"><i class="fab fa-lg fa-stack-overflow"></i></a>
        <!--Youtube-->
        <a class="yt-ic mr-3" role="button"><i class="fab fa-lg fa-youtube"></i></a>
        <!--Slack-->
        <a class="slack-ic mr-3" role="button"><i class="fab fa-lg fa-slack-hash"></i></a>
        <!--Github-->
        <a class="git-ic mr-3" role="button"><i class="fab fa-lg fa-github"></i></a>
        <!--Comments-->
        <a class="comm-ic mr-3" role="button"><i class="fas fa-lg fa-comments"></i></a>
        <!--Email-->
        <a class="email-ic mr-3" role="button"><i class="far fa-lg fa-envelope"></i></a>
        <!--Dribbble-->
        <a class="dribbble-ic mr-3" role="button"><i class="fab fa-lg fa-dribbble"></i></a>
        <!--Reddit-->
        <a class="reddit-ic" role="button"><i class="fab 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