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
<!--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>
Full name social counters MDB Pro component
<!--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
<!--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>
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 AboutMDB 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 ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
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 tutorialIntegrations 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
Social icons MDB Pro component