Bootstrap snippet: Clean contact cards 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: cards,contact,list



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="contact-box center-version"> <a href="#profile.html"> <img alt="image" class="img-circle" src="http://bootdey.com/img/Content/avatar/avatar1.png"> <h3 class="m-b-xs"><strong>John Smith</strong></h3> <div class="font-bold">Graphics designer</div> <address class="m-t-md"> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> </a> <div class="contact-box-footer"> <div class="m-t-xs btn-group"> <a class="btn btn-xs btn-white"><i class="fa fa-phone"></i> Call </a> <a class="btn btn-xs btn-white"><i class="fa fa-envelope"></i> Email</a> <a class="btn btn-xs btn-white"><i class="fa fa-user-plus"></i> Follow</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="contact-box center-version"> <a href="#profile.html"> <img alt="image" class="img-circle" src="http://bootdey.com/img/Content/avatar/avatar6.png"> <h3 class="m-b-xs"><strong>John Smith</strong></h3> <div class="font-bold">Graphics designer</div> <address class="m-t-md"> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> </a> <div class="contact-box-footer"> <div class="m-t-xs btn-group"> <a class="btn btn-xs btn-white"><i class="fa fa-phone"></i> Call </a> <a class="btn btn-xs btn-white"><i class="fa fa-envelope"></i> Email</a> <a class="btn btn-xs btn-white"><i class="fa fa-user-plus"></i> Follow</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="contact-box center-version"> <a href="#profile.html"> <img alt="image" class="img-circle" src="http://bootdey.com/img/Content/avatar/avatar3.png"> <h3 class="m-b-xs"><strong>John Smith</strong></h3> <div class="font-bold">Graphics designer</div> <address class="m-t-md"> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> </a> <div class="contact-box-footer"> <div class="m-t-xs btn-group"> <a class="btn btn-xs btn-white"><i class="fa fa-phone"></i> Call </a> <a class="btn btn-xs btn-white"><i class="fa fa-envelope"></i> Email</a> <a class="btn btn-xs btn-white"><i class="fa fa-user-plus"></i> Follow</a> </div> </div> </div> </div> </div> </div>
body{margin-top:20px; background:#eee; } /* CONTACTS */ .contact-box { background-color: #ffffff; border: 1px solid #e7eaec; padding: 20px; margin-bottom: 20px; } .contact-box > a { color: inherit; } .contact-box.center-version { border: 1px solid #e7eaec; padding: 0; } .contact-box.center-version > a { display: block; background-color: #ffffff; padding: 20px; text-align: center; } .contact-box.center-version > a img { width: 80px; height: 80px; margin-top: 10px; margin-bottom: 10px; } .contact-box.center-version address { margin-bottom: 0; } .contact-box .contact-box-footer { text-align: center; background-color: #ffffff; border-top: 1px solid #e7eaec; padding: 15px 20px; } a{ text-decoration:none !important; }
Dey-Dey

Clean contact cards list

Dey-Dey
  Aug 3rd, 16:51
1.7K Views