<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>Aaron Demi Stradiamuss Aardvark</h2> <p><strong>Member Since: </strong> 31-Dec-2016</p> <p><strong>Address: </strong><br> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. </p> <p><strong>Equipment: </strong> <span class="tags">Nikon D810E</span> <span class="tags">50mm F1.4</span> <span class="tags">SB910 Flash</span> <span class="tags">70-200mm Sigma</span> </p> </div> <div class="col-xs-12 col-sm-4 text-center"> <img src="http://www.placehold.it/200x200.jpg" alt="" class="img-circle img-responsive"> </div> </div> <div class="col-xs-12 divider text-center"> <div class="col-xs-12 col-sm-4 emphasis"> <h2><strong> 3 </strong></h2> <p><small>Real-Life Classes</small></p> <button class="btn btn-danger btn-block"><span class="fa fa-plus-circle"></span> Show Contents </button> </div> <div class="col-xs-12 col-sm-4 emphasis"> <h2><strong>4</strong></h2> <p><small>E-Learnings</small></p> <button class="btn btn-success btn-block"><span class="fa fa-user"></span> Show Contents </button> </div> <div class="col-xs-12 col-sm-4 emphasis"> <h2><strong>43</strong></h2> <p><small>Snippets</small></p> <div class="btn-group dropup btn-block"> <button type="button" class="btn btn-primary"><span class="fa fa-gear"></span> Options </button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu text-left" role="menu"> <li><a href="#"><span class="fa fa-envelope pull-right"></span> Update Profile Pic </a></li> <li><a href="#"><span class="fa fa-list pull-right"></span> Update Address </a></li> <li class="divider"></li> <li><a href="#"><span class="fa fa-warning pull-right"></span>Claim Gifts</a></li> <li class="divider"></li> <li><a href="#" class="btn enabled" role="button"> Ask For Help </a></li> </ul> </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: 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); } .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; box-shadow: none; -webkit-box-shadow: none; width: 250px; margin-left: -125px; left: 50%; } .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; }