Social buttons
Bootstrap social buttons
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
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
<!--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>
Full name social counters MDB Pro component
<!--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
<!--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>
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 AboutMDB Pro
Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.
Click the button below to learn more about the MDBootstrap Pro package.
MDBootstrap ProTutorials
If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.
5 min Quick Start Full Bootstrap TutorialCompilation & 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 tutorialMap 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 VueExclusive 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
Social icons MDB Pro component