web
mobile
Edit these docs 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 MDB Pro component

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 counter-lg">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 counter-md">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 counter-sm">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 counter-lg">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 counter-md">22</span>

        <!--Slack-->
        <button type="button" class="btn btn-sm btn-slack">
          <i class="fab fa-slack-hash"></i>
        </button>
        <span class="counter counter-sm">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>
        <!--WhatsApp-->
        <button type="button" class="btn btn-whatsapp"><i class="fab fa-whatsapp pr-1"></i> Whatsapp</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>
        <!--WhatsApp-->
        <button type="button" class="btn btn-whatsapp"><i class="fab fa-whatsapp pr-1"></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>
        <!--WhatsApp-->
        <a class="btn-floating btn-lg btn-whatsapp" type="button" role="button"><i class="fab fa-whatsapp"></i></a>

      

Full name social counters MDB Pro component

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

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

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

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

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

        <!--WhatsApp-->
        <button type="button" class="btn btn-whatsapp">
          <i class="fab btn-whatsapp pr-1"></i>
          <span>Whatsapp</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 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>

        <!--WhatsApp-->
        <button type="button" class="btn btn-whatsapp">
          <i class="fab fa-whatsapp"></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 mr-3" role="button"><i class="fab fa-lg fa-reddit-alien"></i></a>
        <!--WhatsApp-->
        <a class="whatsapp-ic" role="button"><i class="fab fa-lg fa-whatsapp"></i></a>

      
Edit these docs Rate these docs

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