Bootstrap snippet: User list

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,list



<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"> <h2 class="text-primary title"><span class="glyphicon glyphicon-align-justify"></span>User list</h2> <div class="col-lg-12"> <input type="search" class="form-control" id="input-search" placeholder="Search..." > </div> <div class="searchable-container"> <div class="items col-xs-12 col-sm-6 col-md-6 col-lg-6 clearfix"> <div class="info-block block-info clearfix"> <div class="square-box pull-left"> <span class="fa fa-user"></span> </div> <h5 class="text-success">Company Name</h5> <h4>Name: <b>Full name</b></h4> <p>Title: Manager</p> <span>Email: sample@company.com</span> </div> </div> <div class="items col-xs-12 col-sm-12 col-md-6 col-lg-6 clearfix"> <div class="info-block block-info clearfix"> <div class="square-box pull-left"> <span class="fa fa-user"></span> </div> <h5 class="text-success">Company Name</h5> <h4>Name: <b>Full name</b></h4> <p>Title: Manager</p> <span>Email: sample@company.com</span> </div> </div> <div class="items col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="info-block block-info clearfix"> <div class="square-box pull-left"> <span class="fa fa-user"></span> </div> <h5 class="text-success">Company Name</h5> <h4>Name: <b>Full name</b></h4> <p>Title: Manager</p> <span>Email: sample@company.com</span> </div> </div> <div class="items col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="info-block block-info clearfix"> <div class="square-box pull-left"> <span class="fa fa-user"></span> </div> <h5 class="text-success">Company Name</h5> <h4>Name: <b>Full name</b></h4> <p>Title: Manager</p> <span>Email: sample@company.com</span> </div> </div> </div> </div> </div>
.title{ margin-left:20px } .fa-user{ font-size:80px } .searchable-container{ margin-top:40px; } .glyphicon-lg{ font-size:4em } .info-block{ border-right:5px solid #E6E6E6;margin-bottom:25px } .info-block .square-box { width:120px; min-height:120px; margin-right:22px; text-align:center!important; background-color:#676767; padding:20px 0 } .info-block:hover .info-block.block-info { border-color:#20819e } .info-block.block-info .square-box { background-color:#5bc0de; color:#FFF }
$(function() { $('#input-search').on('keyup', function() { var rex = new RegExp($(this).val(), 'i'); $('.searchable-container .items').hide(); $('.searchable-container .items').filter(function() { return rex.test($(this).text()); }).show(); }); });
Dey-Dey

User list

Dey-Dey
  Jun 21st 2014, 16:25
3.6K Views