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





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

Use button with social media icon to indicate an action or link within your website.

        
            

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

Use these button styles when building social media login forms using Facebook, Twitter, GitHub, Google, and Apple.

        
            

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

By adding .btn-floating class you can create a floating social button.

        
            

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