<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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.0.3/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6"> <div class="well profile"> <div class="col-sm-12"> <div class="col-xs-12 col-sm-2 text-center"> <figure> <img src="http://www.freeiconspng.com/uploads/person-icon-person-icon-17.jpg" alt="" class="img-circle img-responsive"> </figure> </div> <div class="col-xs-12 col-sm-4"> <h2>Nicole Pearson</h2> <p><strong>About: </strong> Web Designer / UI. </p> <p><strong>Skills: </strong> <div class="row"> <span class="tags">html5</span> <span class="tags">css3</span> <span class="tags">jquery</span> <span class="tags">bootstrap3</span> </div> </p> <p> <div id="socialHolder" class="col-md-12"> <div id="socialShare" class="btn-group share-group"> <a data-toggle="dropdown" class="btn btn-info"> <i class="fa fa-share-alt fa-inverse"></i> </a> <button href="#" data-toggle="dropdown" class="btn btn-info dropdown-toggle share"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a data-original-title="LinkedIn" rel="tooltip" href="#" class="btn btn-linkedin" data-placement="left"> <i class="fa fa-linkedin"></i> </a> </li> </ul> </div> </div> </p> </div> <div class="col-xs-12 col-sm-6 text-center"> <div class="row border-between"> <div class="col-xs-6"> <div class="row"> <div class="col-sm-12"> <h3>Blafsoft Consulting</h3> </div> </div> <div class="row"> <div class="col-sm-4"> Industry: </div> <div class="col-sm-8"> Computer Software </div> </div> <div class="row"> <div class="col-sm-4"> Size: </div> <div class="col-sm-8"> 5 - 20 </div> </div> <div class="row"> <div class="col-sm-4"> Revenue: </div> <div class="col-sm-8"> 5M $ - 10M $ </div> </div> </div> <div class="col-xs-6"> <div class="row"> <div class="col-sm-12"> <h3>Edusoft</h3> </div> </div> <div class="row"> <div class="col-sm-4"> Industry: </div> <div class="col-sm-8"> Computer Software </div> </div> <div class="row"> <div class="col-sm-4"> Size: </div> <div class="col-sm-8"> 5 - 20 </div> </div> <div class="row"> <div class="col-sm-4"> Revenue: </div> <div class="col-sm-8"> 5M $ - 10M $ </div> </div> </div> <div class="col-xs-6"> <div class="row"> <div class="col-sm-12"> <h3>Cognism</h3> </div> </div> <div class="row"> <div class="col-sm-4"> Industry: </div> <div class="col-sm-8"> Computer Software </div> </div> <div class="row"> <div class="col-sm-4"> Size: </div> <div class="col-sm-8"> 5 - 20 </div> </div> <div class="row"> <div class="col-sm-4"> Revenue: </div> <div class="col-sm-8"> 5M $ - 10M $ </div> </div> </div> <div class="col-xs-6"> <div class="row"> <div class="col-sm-12"> <h3>IBM</h3> </div> </div> <div class="row"> <div class="col-sm-4"> Industry: </div> <div class="col-sm-8"> Computer Software </div> </div> <div class="row"> <div class="col-sm-4"> Size: </div> <div class="col-sm-8"> 5 - 20 </div> </div> <div class="row"> <div class="col-sm-4"> Revenue: </div> <div class="col-sm-8"> 5M $ - 10M $ </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Lato:400,700); body { font-family: 'Lato', 'sans-serif'; } .profile { min-height: 230px; display: inline-block; width:1000px; } figcaption.ratings { margin-top:20px; } figcaption.ratings a { color:#f1c40f; font-size:11px; } figcaption.ratings a:hover { color:#f39c12; text-decoration:none; } .divider { border-top:1px solid rgba(0,0,0,0.1); } .emphasis { border-top: 4px solid transparent; } .emphasis:hover { border-top: 4px solid #1abc9c; } .emphasis h2 { margin-bottom:0; } span.tags { background: #1abc9c; border-radius: 2px; color: #f5f5f5; font-weight: bold; padding: 2px 4px; } .dropdown-menu { /* background-color: #34495e; */ width: 57px !important; box-shadow: none; -webkit-box-shadow: none; /* width: 1024px; */ /* margin-left: -125px; */ /* left: 50%; */ min-width: 50px !important; padding: 2px; } .dropdown-menu .divider { background:none; } .dropdown-menu>li>a { color:#f5f5f5; } .dropup .dropdown-menu { margin-bottom:10px; } .dropup .dropdown-menu:before { content: ""; border-top: 10px solid #34495e; border-right: 10px solid transparent; border-left: 10px solid transparent; position: absolute; bottom: -10px; left: 50%; margin-left: -10px; z-index: 10; } .right-border { border-right: 1px solid #ccc; } .border-between > [class*='col-']:before { background: #e3e3e3; bottom: 0; content: " "; left: 0; position: absolute; width: 1px; top: 0; } .border-between > [class*='col-']:before { background: #e3e3e3; bottom: 0; content: " "; left: 0; position: absolute; width: 1px; top: 0; } .mobile-social-share { background: none repeat scroll 0 0 #EEEEEE; display: block !important; min-height: 70px !important; margin: 50px 0; } body { color: #777777; font-family: "Lato","Helvetica Neue","Arial","Helvetica",sans-serif; font-size: 13px; line-height: 19.5px; } .mobile-social-share h3 { color: inherit; float: left; font-size: 15px; line-height: 20px; margin: 25px 25px 0 25px; } .share-group { float: right; margin: 18px 25px 0 0; } .btn-group { display: inline-block; font-size: 0; position: relative; vertical-align: middle; white-space: nowrap; } .mobile-social-share ul { float: right; list-style: none outside none; margin: 0; min-width: 61px; padding: 0; } .share { min-width: 17px; } .mobile-social-share li { display: block; font-size: 18px; list-style: none outside none; margin-bottom: 3px; margin-left: 4px; margin-top: 3px; } .btn-share { background-color: #BEBEBE; border-color: #CCCCCC; color: #333333; } .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; } .caret { border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-top: 4px solid; display: inline-block; height: 0; margin-left: 2px; vertical-align: middle; width: 0; } #socialShare { max-width:59px; margin-bottom:18px; } #socialShare > a{ padding: 6px 10px 6px 10px; } @media (max-width : 320px) { #socialHolder{ padding-left:5px; padding-right:5px; } .mobile-social-share h3 { margin-left: 0; margin-right: 0; } #socialShare{ margin-left:5px; margin-right:5px; } .mobile-social-share h3 { font-size: 15px; } } @media (max-width : 238px) { .mobile-social-share h3 { font-size: 12px; } }