"Profile: Linkedin style"
Bootstrap 3.0.0 Snippet by pablocorezzola

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> </head> <body> <div class="col-sm-2 col-sm-offset-4 frame"> <div></div> <div class="profile"> <img class="img-circle img-thumbnail" src="https://media.licdn.com/mpr/mpr/shrinknp_100_100/AAEAAQAAAAAAAAmtAAAAJDY2MzEwMDdhLThhOTEtNDQ3Yy1hMDM3LWM3NzM1MTg2YjVhNw.jpg" /> </div> <div> <div> <h4>piojoman</h4> <p>Do not be afraid to take a big step, A precipice hopping is not passed</p> </div> <div> <div class="column"> <p>15</p> <p>Friend</p> </div> <div class="column"> <p>8</p> <p>Enemy</p> </div> </div> <div> <button class="btn btn-info pull-left" data-toggle="tooltip" data-placement="top" title="Follow to piojoman">Follow</button> <button class="btn btn-danger pull-right" style="margin-left:5px;" data-toggle="tooltip" data-placement="top" title="Block"><span class="glyphicon glyphicon-ban-circle" aria-hidden="true" ></span></button> <button class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Write a comment" ><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button> </div> </div> </div> </body> </html>
.frame{ border:black; border:1px solid rgba(0,0,0,0.15); position:relative; padding:0; display:table; border-radius:2px; } .frame > div:first-of-type{ position:absolute; z-index:-1; height:25%; width:100%; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMnLtQSWlj5VetZstWV6zV19JLKIjttnH6TJdeVgMMHA4EA78A'); } .frame > div:nth-child(3){ position:relative; border-bottom:black; border-bottom: 1px solid rgba(0,0,0,.15); display:flex; flex-direction:column; justify-content:center; width:100%; align-items:center; } .frame > div:nth-child(3) > div:nth-child(1) > h4{ text-align:center; } .frame > div:nth-child(3) > div:nth-child(1) > p{ text-align:center;color:#adadad; font-family:Source Sans Pro;font-weight: 400;font-size: 13px; } .frame > div:nth-child(3) > div:nth-child(1){ width:100%; border-bottom:black; border-bottom: 1px solid rgba(0,0,0,.15); } .frame > div:nth-child(3) > div:nth-child(2){ border-bottom:black; border-bottom: 1px solid rgba(0,0,0,.15); display:table; width:100%; padding:10px; } .frame .column{ width:50%;float:left; } .frame .column > p:first-of-type{ text-align:center; margin-bottom:0; font-size:21px; color:#0084bf; } .frame .column > p:last-of-type{ text-align:center; } .frame > div:nth-child(3) > div:nth-child(3){ padding:10px; width:100%; position:relative; display:table; } .profile{ margin-top:25%; display:flex; justify-content:center; width:100%; align-items:center; } .profile > img { padding:1px; width:30%; }
$('[data-toggle=tooltip]').tooltip();

Related: See More

Argon Design System
Tabs style 1
Hover Effect Style
Instagram Style User Online

Questions / Comments: