Bootstrap snippet: dashboard user block

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,dashboard,block



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="col-md-4"> <!-- START widget--> <div class="panel widget"> <div class="panel-body bg-danger text-center"> <div class="clearfix"> <div class="pull-left">200 Following</div> <div class="pull-right">150 Followers</div> </div> <img src="http://bootdey.com/img/Content/user_3.jpg" alt="Image" class="img-thumbnail img-circle thumb96"> <h4 class="mt0">Lois Berry</h4> <p class="m0"> <em class="fa fa-fw fa-map-marker"></em>San Francisco, California</p> <div class="clearfix"> <div class="pull-left">15k Likes</div> <div class="pull-right">100 Feeds</div> </div> </div> </div> <!-- END widget--> </div> <div class="col-md-4"> <!-- START widget--> <div class="panel widget"> <div class="panel-body bg-primary text-center"> <div class="clearfix"> <div class="pull-left">200 Following</div> <div class="pull-right">150 Followers</div> </div> <img src="http://bootdey.com/img/Content/user_1.jpg" alt="Image" class="img-thumbnail img-circle thumb96"> <h4 class="mt0">Michael chenlyy</h4> <p class="m0"> <em class="fa fa-fw fa-map-marker"></em>San Francisco, California</p> <div class="clearfix"> <div class="pull-left">15k Likes</div> <div class="pull-right">100 Feeds</div> </div> </div> </div> <!-- END widget--> </div> <div class="col-md-4"> <!-- START widget--> <div class="panel widget"> <div class="panel-body bg-info text-center"> <div class="clearfix"> <div class="pull-left">200 Following</div> <div class="pull-right">150 Followers</div> </div> <img src="http://bootdey.com/img/Content/user_2.jpg" alt="Image" class="img-thumbnail img-circle thumb96"> <h4 class="mt0">Margareth Danky</h4> <p class="m0"> <em class="fa fa-fw fa-map-marker"></em>San Francisco, California</p> <div class="clearfix"> <div class="pull-left">15k Likes</div> <div class="pull-right">100 Feeds</div> </div> </div> </div> <!-- END widget--> </div> </div>
body{margin-top:20px;} .widget .panel, .widget.panel { overflow: hidden; } .widget { margin-bottom: 20px; border: 0; } .bg-danger { background-color: #f05050; color: #fff!important; } .bg-info { background-color: #23b7e5; color: #fff!important; } .bg-primary { background-color: #5d9cec; color: #fff!important; }
Dey-Dey

dashboard user block

Dey-Dey
  Jun 15th 2015, 08:02
2.3K Views