<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="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://placehold.it/250x250" class="img-rounded img-responsive" draggable="false" />
<div style="padding-top:15px;"></div>
<span class="label label-warning">Global Rank: #35122</span>
</div>
<div class="col-sm-6 col-md-8">
<span class="label label-warning pull-right">Level: 1</span>
<h4>Casper Thomsen</h4>
<small>
<cite title="San Francisco, USA">Harboøre, Denmark <i class="glyphicon glyphicon-map-marker"></i></cite>
</small>
<p>
<i class="glyphicon glyphicon-envelope"></i>user@mail.com
<br />
<i class="glyphicon glyphicon-globe"></i><a href="http://www.jquery2dotnet.com">www.jquery2dotnet.com</a>
<br />
<i class="glyphicon glyphicon-gift"></i>March 12, 1997
</p>
<hr>
<div class="row nav">
<div class="col-md-8" style="margin: 0px;padding-top: 10px;">
<button class="btn btn-friendly"><i class="fa fa-smile-o fa-lg"></i> 16</button>
<button class="btn btn-heart"><i class="fa fa-heart-o fa-lg"></i> 14</button>
<button class="btn btn-like"><i class="fa fa-thumbs-o-up fa-lg"></i> 26</button></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body{padding-top:30px;}
.btn {
border-radius: 0;
border: 0;
border-bottom: 4px solid #CCCCCC;
margin:0;
-webkit-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
-moz-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
}
.btn .btn-block:active, .btn .btn-lg:active {
-webkit-box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
}
.btn-friendly {
background-color: #80d752;
border-color: #61be26;
text-shadow: 1px 1px 0 #5fdb34;
}
.btn-friendly:hover, .btn-success:focus {
background-color: #75cd53;
border-color: #53aa27;
}
.btn-heart {
background-color: #d73814;
border-color: #be0000;
text-shadow: 1px 1px 0 #ac2925;
}
.btn-heart:hover, .btn-danger:focus {
background-color: #cd3714;
border-color: #aa0000;
}
.btn-like {
background-color: #4274d7;
border-color: #4d5bbe;
text-shadow: 1px 1px 0 #232bd5;
}
.btn-like:hover, .btn-primary:focus {
background-color: #426acd;
border-color: #4f56aa;
}
.glyphicon { margin-bottom: 10px;margin-right: 10px;}
