<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-8"> <h2>Saraya Roberts</h2> <p><strong>Talent Type: </strong> </p> <p><strong>Mentor Group: </strong> </p> <div class="col-xs-12 divider"> <p><strong>Technology Career Interests: </strong> <span class="tags">Developer</span> <span class="tags">Digital Madia</span> <span class="tags">Visual Disign</span> </p> </div> <div class="col-xs-12 divider"> <p><strong>related interests: </strong> <span class="tags">Fitness & Working Out</span> <span class="tags">History</span> <span class="tags">Card & Board Games</span> <span class="tags">Dance</span> <span class="tags">Music</span> <span class="tags">Blog</span> </p> </div> </div> <div class="col-xs-12 col-sm-4 text-center"> <figure> <img src="http://www.localcrimenews.com/wp-content/uploads/2013/07/default-user-icon-profile.png" alt="" class="img-circle img-responsive"> <figcaption class="ratings"> <p>Ratings <a href="#"> <span class="fa fa-star"></span> </a> <a href="#"> <span class="fa fa-star"></span> </a> <a href="#"> <span class="fa fa-star"></span> </a> <a href="#"> <span class="fa fa-star"></span> </a> <a href="#"> <span class="fa fa-star-o"></span> </a> </p> </figcaption> </figure> </div> </div> <div class="col-xs-12 divider text-center"> <div class="col-xs-12 col-sm-4 emphasis"> <button class="btn btn-success btn-block"><span class="fa fa-plus-circle"></span> Email </button> </div> <div class="col-xs-12 col-sm-4 emphasis"> <button class="btn btn-info btn-block"><span class="fa fa-user"></span> Twittwer </button> </div> <div class="col-xs-12 col-sm-4 emphasis"> <button type="button" class="btn btn-primary"><span class="fa fa-gear"></span> Linkden </button> </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: 355px; display: inline-block; } 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); padding: 10px; } span.tags { background: #1abc9c; border-radius: 2px; color: #f5f5f5; font-weight: bold; padding: 1px 2px; }