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.


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>
<!--Youtube-->
<button type="button" class="btn btn-yt"><i class="fa fa-youtube pr-1"></i> Youtube</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>
<!--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>
                                    
                                

Large button

                            
<button type="button" class="btn btn-lg btn-fb"><i class="fa fa-facebook pr-1"></i> Facebook</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>
<!--Youtube-->
<button type="button" class="btn btn-yt"><i class="fa fa-youtube"></i></button>
<!--Dribbble-->
<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble"></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>
<!--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>
<!--Reddit-->
<button type="button" class="btn btn-reddit"><i class="fa fa-reddit-alien"></i></button>
                                    
                                

Large button

                            
<button type="button" class="btn btn-lg btn-fb"><i class="fa fa-facebook"></i></button>
                            
                            

Floating social buttons MDB Pro component

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

Sizes

                            
<!--Large-->
<a type="button" class="btn-floating btn-lg btn-fb"><i class="fa fa-facebook"></i></a>
<!--Medium-->
<a type="button" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></a>
<!--Small-->
<a type="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></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>

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

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

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

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

<!--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 btn-lg">
    <i class="fa fa-facebook"></i>
</button>
<span class="counter">22</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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