<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="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row mobile-social-share"> <div class="col-md-9"> <h3>Share this content</h3> </div> <div id="socialHolder" class="col-md-3"> <div id="socialShare"> <a data-toggle="dropdown" class="btn-share"><i class="fa fa-share-alt fa-inverse"></i></a> <ul class="dropdown-menu"> <li><a data-original-title="Twitter" rel="tooltip" href="#" class="btn btn-twitter" data-placement="left"><i class="fa fa-twitter"></i></a></li> <li><a data-original-title="Facebook" rel="tooltip" href="#" class="btn btn-facebook" data-placement="left"><i class="fa fa-facebook"></i></a></li> <li><a data-original-title="Google+" rel="tooltip" href="#" class="btn btn-google" data-placement="left"><i class="fa fa-google-plus"></i></a></li> <li><a data-original-title="LinkedIn" rel="tooltip" href="#" class="btn btn-linkedin" data-placement="left"><i class="fa fa-linkedin"></i></a></li> <li><a data-original-title="Pinterest" rel="tooltip" class="btn btn-pinterest" data-placement="left"><i class="fa fa-pinterest"></i></a></li> <li><a data-original-title="Email" rel="tooltip" class="btn btn-mail" data-placement="left"><i class="fa fa-envelope"></i></a></li> </ul> </div> </div> </div> </div> </div>

#socialShare { background-color: rgba(0,0,0,0.2); padding:0; border-radius:100%; width:32px; height:32px; text-align:center; } .btn-share { cursor:pointer; position:relative; margin:auto; width:32px; height:32px; padding: 0 !important; top: 5px; } .mobile-social-share ul { float: right; list-style: none outside none; margin: 0; min-width: 61px; padding: 0; } .mobile-social-share li { display: block; font-size: 18px; list-style: none outside none; margin-bottom: 3px; margin-left: 4px; margin-top: 3px; } .btn-twitter { background-color: #3399CC !important; width: 51px; color:#FFFFFF!important; } .btn-facebook { background-color: #3D5B96 !important; width: 51px; color:#FFFFFF!important; } .btn-facebook { background-color: #3D5B96 !important; width: 51px; color:#FFFFFF!important; } .btn-google { background-color: #DD3F34 !important; width: 51px; color:#FFFFFF!important; } .btn-linkedin { background-color: #1884BB !important; width: 51px; color:#FFFFFF!important; } .btn-pinterest { background-color: #CC1E2D !important; width: 51px; color:#FFFFFF!important; } .btn-mail { background-color: #FFC90E !important; width: 51px; color:#FFFFFF!important; }