Bootstrap snippet: User profile resume

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: user,profile



<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-7"> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class="col-xs-12 col-sm-8"> <h2 class="text-primary"><b><span class="glyphicon glyphicon-user"></span> Bootdey Bootstrap</b></h2> <p><strong><span class="glyphicon glyphicon-ok-circle"></span>About: </strong>Page for Web Designer</p> <p><strong><span class="glyphicon glyphicon-certificate"></span>Hobbies: </strong>write rap, listen to rap music</p> <p><strong><span class="glyphicon glyphicon-thumbs-up"></span>Skills: </strong> <span class="label label-info tags">html5</span> <span class="label label-info tags">css3</span> <span class="label label-info tags">jquery</span> <span class="label label-info tags">bootstrap3</span> </p> </div><!--/col--> <div class="col-xs-12 col-sm-4 text-center"> <img src="http://www.gravatar.com/avatar/f6112e781842d6a2b4636b35451401ff?s=180&amp;d=mm&amp;r=g" alt="" class="center-block img-circle img-responsive profile-img"> <ul class="list-inline ratings text-center" title="Ratings"> <li><a href="#"><span class="fa fa-star fa-lg"></span></a></li> <li><a href="#"><span class="fa fa-star fa-lg"></span></a></li> <li><a href="#"><span class="fa fa-star fa-lg"></span></a></li> <li><a href="#"><span class="fa fa-star fa-lg"></span></a></li> </ul> </div><!--/col--> <div class="col-xs-12 col-sm-4"> <h2><strong> 10,7K </strong></h2> <p><small>Followers</small></p> <button class="btn btn-success btn-block"><span class="fa fa-plus-circle"></span> Follow </button> </div><!--/col--> <div class="col-xs-12 col-sm-4"> <h2><strong>35</strong></h2> <p><small>Following</small></p> <button class="btn btn-info btn-block"><span class="fa fa-user"></span> View Profile </button> </div><!--/col--> <div class="col-xs-12 col-sm-4"> <h2><strong>58</strong></h2> <p><small>Snippets</small></p> <button type="button" class="btn btn-primary btn-block"><span class="fa fa-gear"></span> Options </button> </div><!--/col--> </div><!--/row--> </div><!--/panel-body--> </div><!--/panel--> </div> </div> </div>
.profile-img{box-shadow: 0 5px 15px rgba(0,0,0,.5)}
Dey-Dey

User profile resume

Dey-Dey
  Jun 30th 2014, 20:23
4.6K Views