<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.3/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="container"> <h3> <a href="http://www.jquery2dotnet.com">Bootstrap Group Button Social Sharing</a></h3> <div class="btn-group"> <button class="btn btn-default btn-lg disabled"> Share:</button> <a class="btn btn-default btn-lg" target="_blank" title="Like On Facebook" href="https://www.facebook.com/jquery2dotnet"> <i class="fa fa-thumbs-o-up fa-lg fb"></i></a><a class="btn btn-default btn-lg" target="_blank" title="On Facebook" href="https://www.facebook.com/jquery2dotnet"><i class="fa fa-facebook fa-lg fb"> </i></a><a class="btn btn-default btn-lg" target="_blank" title="On Twitter" href="#"> <i class="fa fa-twitter fa-lg tw"></i></a><a class="btn btn-default btn-lg" target="_blank" title="On Google Plus" href="https://plus.google.com/+Jquery2dotnet/posts"><i class="fa fa-google-plus fa-lg google"> </i></a><a class="btn btn-default btn-lg" target="_blank" title="On LinkedIn" href="#"> <i class="fa fa-linkedin fa-lg linkin"></i></a><a class="btn btn-default btn-lg" target="_blank" title="Pin It" href="#"><i class="fa fa-pinterest fa-lg pinterest"> </i></a> </div> </div> <hr> <div class="container"> <div class="btn-group"> <button class="btn btn-default disabled"> Share:</button> <a class="btn btn-default" target="_blank" title="Like On Facebook" href="#"><i class="fa fa-thumbs-o-up fa-lg fb"> </i></a><a class="btn btn-default" target="_blank" title="On Facebook" href="#"><i class="fa fa-facebook fa-lg fb"></i></a><a class="btn btn-default" target="_blank" title="On Twitter" href="#"><i class="fa fa-twitter fa-lg tw"></i></a><a class="btn btn-default" target="_blank" title="On Google Plus" href="#"><i class="fa fa-google-plus fa-lg google"> </i></a><a class="btn btn-default" target="_blank" title="On LinkedIn" href="#"><i class="fa fa-linkedin fa-lg linkin"></i></a><a class="btn btn-default" target="_blank" title="Pin It" href="#"><i class="fa fa-pinterest fa-lg pinterest"></i> </a> </div> </div> <hr> <div class="container"> <div class="btn-group"> <button class="btn btn-default btn-sm disabled"> Share:</button> <a class="btn btn-default btn-sm" target="_blank" title="Like On Facebook" href="#"> <i class="fa fa-thumbs-o-up fa-lg fb"></i></a><a class="btn btn-default btn-sm" target="_blank" title="On Facebook" href="#"><i class="fa fa-facebook fa-lg fb"></i></a> <a class="btn btn-default btn-sm" target="_blank" title="On Twitter" href="#"><i class="fa fa-twitter fa-lg tw"></i></a><a class="btn btn-default btn-sm" target="_blank" title="On Google Plus" href="#"><i class="fa fa-google-plus fa-lg google"></i> </a><a class="btn btn-default btn-sm" target="_blank" title="On LinkedIn" href="#"><i class="fa fa-linkedin fa-lg linkin"></i></a><a class="btn btn-default btn-sm" target="_blank" title="Pin It" href="#"><i class="fa fa-pinterest fa-lg pinterest"></i></a> </div> </div> <hr> <div class="container"> <div class="btn-group"> <button class="btn btn-default btn-xs disabled"> Share:</button> <a class="btn btn-default btn-xs" target="_blank" title="Like On Facebook" href="#"> <i class="fa fa-thumbs-o-up fa-lg fb"></i></a><a class="btn btn-default btn-xs" target="_blank" title="On Facebook" href="#"><i class="fa fa-facebook fa-lg fb"></i></a> <a class="btn btn-default btn-xs" target="_blank" title="On Twitter" href="#"><i class="fa fa-twitter fa-lg tw"></i></a><a class="btn btn-default btn-xs" target="_blank" title="On Google Plus" href="#"><i class="fa fa-google-plus fa-lg google"></i> </a><a class="btn btn-default btn-xs" target="_blank" title="On LinkedIn" href="#"><i class="fa fa-linkedin fa-lg linkin"></i></a><a class="btn btn-default btn-xs" target="_blank" title="Pin It" href="#"><i class="fa fa-pinterest fa-lg pinterest"></i></a> </div> </div> </div> </div>

.container{ text-align: center; } /* Button styles: */ i.fb, span.fb{ color: #3b5998; } i.tw, span.tw{ color: #00aced; } i.google, span.google{ color: #dd4b39; } i.linkin, span.linkin{ color: #007bb6; } i.pinterest,span.pinterest{ color: #cb2027; }