Bootstrap social buttons

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 Premium component


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

Large button



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

Simple social buttons Premium 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 left"></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>

Large button



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

Floating social buttons Premium component


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

Small button



<!--Facebook-->
<a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>

Full name social counters Premium component

Facebook 22 Twitter 22 Google+ 22 Linkedin 22 Instagram 22 Pinterest 22 Youtube 22 Dribbble 22 Vkontakte 22 Stack Overflow 22 Slack 22 Github 22 Comments 22 Emails 22

<!--Facebook-->
<a class="btn btn-fb">
    <i class="fa fa-facebook left"></i>
    <span>Facebook</span>
</a>
<span class="counter">22</span>

<!--Twitter-->
<a class="btn btn-tw">
    <i class="fa fa-twitter left"></i>
    <span>Twitter</span>
</a>
<span class="counter">22</span>

<!--Google +-->
<a class="btn btn-gplus">
    <i class="fa fa-google-plus left"></i>
    <span>Google+</span>
</a>
<span class="counter">22</span>

<!--Linkedin-->
<a class="btn btn-li">
    <i class="fa fa-linkedin left"></i>
    <span>Linkedin</span>
</a>
<span class="counter">22</span>

<!--Instagram-->
<a class="btn btn-ins">
    <i class="fa fa-instagram left"></i>
    <span>Instagram</span>
</a>
<span class="counter">22</span>

<!--Pinterest-->
<a class="btn btn-pin">
    <i class="fa fa-pinterest left"></i>
    <span>Pinterest</span>
</a>
<span class="counter">22</span>

<!--Youtube-->
<a class="btn btn-yt">
    <i class="fa fa-youtube left"></i>
    <span>Youtube</span>
</a>
<span class="counter">22</span>

<!--Dribbble-->
<a class="btn btn-dribbble">
    <i class="fa fa-dribbble left"></i>
    <span>Dribbble</span>
</a>
<span class="counter">22</span>

<!--Vkontakte-->
<a class="btn btn-vk">
    <i class="fa fa-vk left"></i>
    <span>Vkontakte</span>
</a>
<span class="counter">22</span>

<!--Stack Overflow-->
<a class="btn btn-so">
    <i class="fa fa-stack-overflow left"></i>
    <span>Stack Overflow</span>
</a>
<span class="counter">22</span>

<!--Slack-->
<a class="btn btn-slack">
    <i class="fa fa-slack left"></i>
    <span>Slack</span>
</a>
<span class="counter">22</span>

<!--Github-->
<a class="btn btn-git">
    <i class="fa fa-github left"></i>
    <span>Github</span>
</a>
<span class="counter">22</span>

<!--Comments-->
<a class="btn btn-comm">
    <i class="fa fa-comments left"></i>
    <span>Comments</span>
</a>
<span class="counter">22</span>

<!--Emails-->
<a class="btn btn-email">
    <i class="fa fa-envelope left"></i>
    <span>Emails</span>
</a>
<span class="counter">22</span>

Simple social counters Premium component

22 22 22 22 22 22 22 22 22 22 22 22 22 22

<!--Facebook-->
<a class="btn btn-fb btn-lg">
    <i class="fa fa-facebook"></i>
</a>
<span class="counter">22</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

Social Icons Premium component


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

Social list Premium component


<div class="col-md-6">

    <ul class="social-list">
        <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i> Facebook</a></li>
        <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i> Twitter</a></li>
        <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i> Google +</a></li>
        <li><a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i> LinkedIn</a></li>
        <li><a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i> Instagram</a></li>
        <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i> Pinterest</a></li>
        <li><a class="icons-sm pin-vk"><i class="fa fa-vk"> </i> Vkontakte</a></li>
        <li><a class="icons-sm yt-ic"><i class="fa fa-youtube"> </i> Youtube</a></li>
        <li><a class="icons-sm dribbble-ic"><i class="fa fa-dribbble"> </i> Dribbble</a></li>
        <li><a class="icons-sm git-ic"><i class="fa fa-github"> </i> Github</a></li>
        <li><a class="icons-sm so-ic"><i class="fa fa-stack-overflow"> </i> Stack Overflow</a></li>
        <li><a class="icons-sm slack-ic"><i class="fa fa-slack"> </i> Slack</a></li>
        <li><a class="icons-sm comm-ic"><i class="fa fa-comments"> </i> Comments</a></li>
        <li><a class="icons-sm email-ic"><i class="fa fa-envelope-o"> </i> Email</a></li>
    </ul>

</div>