Bootstrap snippet: colored users cards

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: html,css,cards



<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-5"> <div class="widget-head-color-box lazur-bg p-lg text-center"> <div class="m-b-md"> <h2 class="font-bold no-margins"> Alex Smith </h2> <small>Founder of Mysite</small> </div> <img src="http://bootdey.com/img/Content/user_1.jpg" class="img-circle circle-border m-b-md" alt="profile"> <div> <span>100 Tweets</span> | <span>350 Following</span> | <span>610 Followers</span> </div> </div> <div class="widget-text-box"> <h4 class="media-heading">Alex Smith</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <div class="text-right"> <a class="btn btn-xs btn-default"><i class="fa fa-thumbs-up"></i> Like </a> <a class="btn btn-xs btn-primary"><i class="fa fa-heart"></i> Love</a> <a class="btn btn-xs btn-success"><i class="fa fa fa-envelope"></i> Message</a> <a class="btn btn-xs btn-info"><i class="fa fa fa-phone"></i> Call</a> </div> </div> </div> <div class="col-md-5"> <div class="widget-head-color-box red-bg p-lg text-center"> <div class="m-b-md"> <h2 class="font-bold no-margins"> Barbao Smith </h2> <small>Founder of something</small> </div> <img src="http://bootdey.com/img/Content/user_3.jpg" class="img-circle circle-border m-b-md" alt="profile"> <div> <span>100 Tweets</span> | <span>350 Following</span> | <span>610 Followers</span> </div> </div> <div class="widget-text-box"> <h4 class="media-heading">Barbao Smith</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <div class="text-right"> <a class="btn btn-xs btn-default"><i class="fa fa-thumbs-up"></i> Like </a> <a class="btn btn-xs btn-primary"><i class="fa fa-heart"></i> Love</a> <a class="btn btn-xs btn-success"><i class="fa fa fa-envelope"></i> Message</a> <a class="btn btn-xs btn-info"><i class="fa fa fa-phone"></i> Call</a> </div> </div> </div> </div> </div>
body{margin-top:20px;} .p-lg { padding: 30px; } .lazur-bg { background-color: #23c6c8; color: #ffffff; } .red-bg { background-color: #ed5565; color: #ffffff; } .navy-bg { background-color: #1ab394; color: #ffffff; } .yellow-bg { background-color: #f8ac59; color: #ffffff; } .widget-head-color-box { border-radius: 5px 5px 0px 0px; margin-top: 10px; } .m-b-md { margin-bottom: 20px; } .no-margins { margin: 0 !important; } .font-bold { font-weight: 600; } img.circle-border { border: 6px solid #FFFFFF; border-radius: 50%; } .widget-text-box { padding: 20px; border: 1px solid #e7eaec; background: #ffffff; } .media-heading { margin-top: 0; margin-bottom: 5px; }
Dey-Dey

colored users cards

Dey-Dey
  Jul 23rd 2015, 08:25
2.3K Views