Social Buttons page header description goes here...
Usage
Use the Bootstrap Social library to create branded social media buttons. Combine btn classes with network-specific styles (e.g., btn-facebook, btn-twitter) to add ready-made icons and colors for quick social sign-in or sharing links.
Please read the official bootstrap social documentation for the full list of options.
| Buttons | class="" | Color Code |
|---|---|---|
| Sign in with App.net | btn btn-social btn-adn |
#D87A68 |
| Sign in with Bitbucket | btn btn-social btn-bitbucket |
#205081 |
| Sign in with Dropbox | btn btn-social btn-dropbox |
#1087DD |
| Sign in with Facebook | btn btn-social btn-facebook |
#3B5998 |
| Sign in with Flickr | btn btn-social btn-flickr |
#2BA9E1 |
| Sign in with Foursquare | btn btn-social btn-foursquare |
#f94877 |
| Sign in with GitHub | btn btn-social btn-github |
#444444 |
| Sign in with Google | btn btn-social btn-google |
#DD4B39 |
| Sign in with Instagram | btn btn-social btn-instagram |
#3F729B |
| Sign in with LinkedIn | btn btn-social btn-linkedin |
#007BB6 |
| Sign in with Microsoft | btn btn-social btn-microsoft |
#2672EC |
| Sign in with Odnoklassniki | btn btn-social btn-odnoklassniki |
#F4731C |
| Sign in with OpenID | btn btn-social btn-openid |
#F7931E |
| Sign in with Pinterest | btn btn-social btn-pinterest |
#CB2027 |
| Sign in with Reddit | btn btn-social btn-reddit |
#EFF7FF |
| Sign in with SoundCloud | btn btn-social btn-soundcloud |
#FF5500 |
| Sign in with Tumblr | btn btn-social btn-tumblr |
#CB2027 |
| Sign in with Twitter | btn btn-social btn-twitter |
#55ACEE |
| Sign in with Vimeo | btn btn-social btn-vimeo |
#1AB7EA |
| Sign in with VK | btn btn-social btn-vk |
#587EA3 |
| Sign in with Yahoo! | btn btn-social btn-yahoo |
#720E9E |
Sizes
Adjust icon dimensions with predefined size classes such as fa-sm, fa-lg, or fa-2x through fa-10x.
These utilities make it easy to scale icons for buttons, headings, or any element that needs visual balance.
Social Icons
Add social media icons to your interface by combining your preferred icon library (such as Font Awesome or Bootstrap Icons) with the
.btn-social-iconclass. This creates clean, clickable buttons that link to profiles, sharing tools, or login options.