<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-sm-4 social-buttons"> <h3>The Buttons</h3> <a class="btn btn-block btn-social btn-bitbucket"> <i class="fa fa-bitbucket"></i> Sign in with Bitbucket </a> <a class="btn btn-block btn-social btn-dropbox"> <i class="fa fa-dropbox"></i> Sign in with Dropbox </a> <a class="btn btn-block btn-social btn-facebook"> <i class="fa fa-facebook"></i> Sign in with Facebook </a> <a class="btn btn-block btn-social btn-flickr"> <i class="fa fa-flickr"></i> Sign in with Flickr </a> <a class="btn btn-block btn-social btn-github"> <i class="fa fa-github"></i> Sign in with GitHub </a> <a class="btn btn-block btn-social btn-google-plus"> <i class="fa fa-google-plus"></i> Sign in with Google </a> <a class="btn btn-block btn-social btn-instagram"> <i class="fa fa-instagram"></i> Sign in with Instagram </a> <a class="btn btn-block btn-social btn-linkedin"> <i class="fa fa-linkedin"></i> Sign in with LinkedIn </a> <a class="btn btn-block btn-social btn-pinterest"> <i class="fa fa-pinterest"></i> Sign in with Pinterest </a> <a class="btn btn-block btn-social btn-tumblr"> <i class="fa fa-tumblr"></i> Sign in with Tumblr </a> <a class="btn btn-block btn-social btn-twitter"> <i class="fa fa-twitter"></i> Sign in with Twitter </a> <a class="btn btn-block btn-social btn-vk"> <i class="fa fa-vk"></i> Sign in with VK </a> <hr> <div class="text-center"> <a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a> <a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a> <a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a> <a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a> <a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a> <a class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i></a> <a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a> <a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a> <a class="btn btn-social-icon btn-pinterest"><i class="fa fa-pinterest"></i></a> <a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a> <a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a> <a class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a> </div> </div> <div class="col-sm-4"> <h3>Available Classes</h3> <ul class="social-class list-unstyled"> <li data-code="bitbucket" data-name="Bitbucket"><code>btn-bitbucket</code> <span class="social-hex">#205081</span></li> <li data-code="dropbox" data-name="Dropbox"><code>btn-dropbox</code> <span class="social-hex">#1087DD</span></li> <li data-code="facebook" data-name="Facebook"><code>btn-facebook</code> <span class="social-hex">#3B5998</span></li> <li data-code="flickr" data-name="Flickr"><code>btn-flickr</code> <span class="social-hex">#2BA9E1</span></li> <li data-code="github" data-name="GitHub"><code>btn-github</code> <span class="social-hex">#444444</span></li> <li data-code="google-plus" data-name="Google"><code>btn-google-plus</code> <span class="social-hex">#517FA4</span></li> <li data-code="instagram" data-name="Instagram"><code>btn-instagram</code> <span class="social-hex">#DD4B39</span></li> <li data-code="linkedin" data-name="LinkedIn"><code>btn-linkedin</code> <span class="social-hex">#007BB6</span></li> <li data-code="pinterest" data-name="Pinterest"><code>btn-pinterest</code> <span class="social-hex">#4875B4</span></li> <li data-code="tumblr" data-name="Tumblr"><code>btn-tumblr</code> <span class="social-hex">#CB2027</span></li> <li data-code="twitter" data-name="Twitter"><code>btn-twitter</code> <span class="social-hex">#2C4762</span></li> <li data-code="vk" data-name="VK"><code>btn-vk</code> <span class="social-hex">#587EA3</span></li> </ul> </div> <div class="col-sm-4"> <div class="social-sizes"> <h3>Different Sizes</h3> <a class="btn btn-block btn-social btn-lg btn-bitbucket"><i class="fa fa-bitbucket"></i>Sign in with Bitbucket</a> <a class="btn btn-block btn-social btn-bitbucket"><i class="fa fa-bitbucket"></i>Sign in with Bitbucket</a> <a class="btn btn-block btn-social btn-sm btn-bitbucket"><i class="fa fa-bitbucket"></i>Sign in with Bitbucket</a> <a class="btn btn-block btn-social btn-xs btn-bitbucket"><i class="fa fa-bitbucket"></i>Sign in with Bitbucket</a> <hr> <div class="text-center"> <a class="btn btn-social-icon btn-lg btn-bitbucket"><i class="fa fa-bitbucket"></i></a> <a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a> <a class="btn btn-social-icon btn-sm btn-bitbucket"><i class="fa fa-bitbucket"></i></a> <a class="btn btn-social-icon btn-xs btn-bitbucket"><i class="fa fa-bitbucket"></i></a> </div> </div> </div> </div> <hr> </div>