bootstrap-social | Creating Custom Social Buttons with Bootstrap

bootstrap-social is a CSS extension for Bootstrap, it can let you create some very beautiful social network buttons for you web applications.

bootstrap-social - Creating Custom Social Buttons with Bootstrap

AuthorLinksMade withLast update
abouetOffice HomeBootstrapSep 15, 2022

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 create social buttons using bootstrap-social?

1.Import Bootstrap and bootstrap-social style files

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

2. Use btn-social and btn-socialName classes to create buttons

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

3.You also can use Font Awesome to set some social icons for buttons

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

Leave a Reply

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