Create Custom Social Buttons Using Bootstrap 4 – bootstrap-social

Author: abouet
Views Total: 5,365 views
Official Page: Go to website
Last Update: February 20, 2019
License: MIT


Create Custom Social Buttons Using Bootstrap 4 – bootstrap-social


A CSS extension for Bootstrap 4 that lets you create pretty nice and fully configurable social network buttons on the webpage.

Supported Social Networks:

  • Adn
  • Bitbucket
  • Discord
  • Dropbox
  • Facebook
  • Flickr
  • Foursquar
  • Github
  • Google
  • Instagram
  • Linkedin
  • Microsoft
  • Odnoklassniki
  • Openid
  • Pinterest
  • Reddit
  • Soundcloud
  • Tumblr
  • Twitter
  • Viadeo
  • Vimeo
  • Vk
  • Yahoo

How to use it:

Download and include the bootstrap-social.css after Bootstrap’s stylesheet.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/bootstrap-social.css">

Add btn-social and btn-socialName classes to the Bootstrap buttons and done.

<a class="btn btn-social btn-facebook">
  <i class="fab fa-facebook-f"></i>
<a class="btn btn-social btn-google">
  <img src="btn_google.svg">
  Login via Google

Show social icons only. In this example, we’re going to use Font Awesome for social icons.

<a class="btn btn-social-icon btn-facebook">
  <i class="fab fa-facebook-f"></i>


See also  Get Keys of a Javascript Object with Object.keys()

Leave a Reply

Your email address will not be published. Required fields are marked *