Bootstrap snippet: user cards 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,cards,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="row"> <div class="col-md-4"> <!-- START widget--> <div class="panel widget"> <div style="background-image: url('http://themicon.co/theme/angle/v2.4/backend-jquery/app/img/bg4.jpg')" class="panel-body text-center bg-center"> <div class="row row-table"> <div class="col-xs-12 text-white"> <img src="http://bootdey.com/img/Content/User_for_snippets.png" alt="Image" class="img-thumbnail img-circle thumb128"> <h3 class="m0">Chris</h3> <p class="m0"> <em class="fa fa-twitter fa-fw"></em>@chris</p> </div> </div> </div> <div class="panel-body text-center bg-gray-darker"> <div class="row row-table"> <div class="col-xs-4"> <a href="#" class="text-white"> <em class="fa fa-twitter fa-2x"></em> </a> </div> <div class="col-xs-4"> <a href="#" class="text-white"> <em class="fa fa-facebook fa-2x"></em> </a> </div> <div class="col-xs-4"> <a href="#" class="text-white"> <em class="fa fa-comments fa-2x"></em> </a> </div> </div> </div> <div class="list-group"> <a href="#" class="list-group-item"> <span class="label label-primary pull-right">15</span> <em class="fa fa-fw fa-clock-o text-muted"></em>Recent Activity</a> <a href="#" class="list-group-item"> <span class="label label-primary pull-right">100</span> <em class="fa fa-fw fa-user text-muted"></em>Following</a> <a href="#" class="list-group-item"> <span class="label label-primary pull-right">300</span> <em class="fa fa-fw fa-folder-open-o text-muted"></em>Photos</a> </div> </div> <!-- END widget--> </div> <div class="col-md-4"> <!-- START widget--> <div class="panel widget"> <div style="background-image: url('http://themicon.co/theme/angle/v2.4/backend-jquery/app/img/bg4.jpg')" class="panel-body text-center bg-center"> <div class="row row-table"> <div class="col-xs-12 text-white"> <img src="http://bootdey.com/img/Content/user_2.jpg" alt="Image" class="img-thumbnail img-circle thumb128"> <h3 class="m0">Chris</h3> <p class="m0"> <em class="fa fa-twitter fa-fw"></em>@chris</p> </div> </div> </div> <div class="panel-body text-center bg-gray-darker"> <div class="row row-table"> <div class="col-xs-4"> <a href="#" class="text-white"> <em class="fa fa-twitter fa-2x"></em> </a> </div> <div class="col-xs-4"> <a href="#" class="text-white"> <em class="fa fa-facebook fa-2x"></em> </a> </div> <div class="col-xs-4"> <a href="#" class="text-white"> <em class="fa fa-comments fa-2x"></em> </a> </div> </div> </div> <div class="list-group"> <a href="#" class="list-group-item"> <span class="label label-primary pull-right">15</span> <em class="fa fa-fw fa-clock-o text-muted"></em>Recent Activity</a> <a href="#" class="list-group-item"> <span class="label label-primary pull-right">100</span> <em class="fa fa-fw fa-user text-muted"></em>Following</a> <a href="#" class="list-group-item"> <span class="label label-primary pull-right">300</span> <em class="fa fa-fw fa-folder-open-o text-muted"></em>Photos</a> </div> </div> <!-- END widget--> </div> <div class="col-md-4"> <!-- START widget--> <div class="panel widget"> <div style="background-image: url('http://themicon.co/theme/angle/v2.4/backend-jquery/app/img/bg4.jpg')" class="panel-body text-center bg-center"> <div class="row row-table"> <div class="col-xs-12 text-white"> <img src="http://bootdey.com/img/Content/user_1.jpg" alt="Image" class="img-thumbnail img-circle thumb128"> <h3 class="m0">Chris</h3> <p class="m0"> <em class="fa fa-twitter fa-fw"></em>@chris</p> </div> </div> </div> <div class="panel-body text-center bg-gray-darker"> <div class="row row-table"> <div class="col-xs-4"> <a href="#" class="text-white"> <em class="fa fa-twitter fa-2x"></em> </a> </div> <div class="col-xs-4"> <a href="#" class="text-white"> <em class="fa fa-facebook fa-2x"></em> </a> </div> <div class="col-xs-4"> <a href="#" class="text-white"> <em class="fa fa-comments fa-2x"></em> </a> </div> </div> </div> <div class="list-group"> <a href="#" class="list-group-item"> <span class="label label-primary pull-right">15</span> <em class="fa fa-fw fa-clock-o text-muted"></em>Recent Activity</a> <a href="#" class="list-group-item"> <span class="label label-primary pull-right">100</span> <em class="fa fa-fw fa-user text-muted"></em>Following</a> <a href="#" class="list-group-item"> <span class="label label-primary pull-right">300</span> <em class="fa fa-fw fa-folder-open-o text-muted"></em>Photos</a> </div> </div> <!-- END widget--> </div> </div> </div>
body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.52857143; color: #515253; background-color: #f5f7fa; margin-top:20px; } .widget .panel, .widget.panel { overflow: hidden; } .widget { margin-bottom: 20px; border: 0; } .bg-gray-darker { background-color: #232735; color: #fff!important; } .row-table { display: table; table-layout: fixed; height: 100%; width: 100%; margin: 0; } .row-table>[class*=col-] { display: table-cell; float: none; table-layout: fixed; vertical-align: middle; } .text-white { color: #fff; } .thumb128 { width: 128px!important; height: 128px!important; } .m0 { margin: 0!important; } .bg-gray-darker { background-color: #232735; color: #fff!important; } .list-group { line-height: 1.3; } .panel>.list-group .list-group-item { border-top: 0; }
Dey-Dey

user cards block

Dey-Dey
  Jun 26th 2015, 08:07
2.7K Views