Bootstrap snippet: List user profiles

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,profile,photo



<div class="container bootstrap snippet"> <div class="col-sm-4"> <!-- Begin user profile --> <div class="box-info text-center user-profile-2"> <div class="header-cover"> <img src="http://bootdey.com/img/Content/bg_element.jpg" alt="User cover"> </div> <div class="user-profile-inner"> <h4 class="white">Jonny doe</h4> <img src="http://bootdey.com/img/Content/User_for_snippets.png" class="img-circle profile-avatar" alt="User avatar"> <h5>Administrator</h5> <!-- User button --> <div class="user-button"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary btn-sm btn-block"><i class="fa fa-envelope"></i> Send Message</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-default btn-sm btn-block"><i class="fa fa-user"></i> Add as friend</button> </div> </div> </div> </div> </div> </div> <div class="col-sm-4"> <!-- Begin user profile --> <div class="box-info text-center user-profile-2"> <div class="header-cover"> <img src="http://bootdey.com/img/Content/HexGames349.jpg" alt="User cover"> </div> <div class="user-profile-inner"> <h4 class="white">Jonny doe</h4> <img src="http://bootdey.com/img/Content/image_site_girl_write.jpg" class="img-circle profile-avatar" alt="User avatar"> <h5>Administrator</h5> <!-- User button --> <div class="user-button"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary btn-sm btn-block"><i class="fa fa-envelope"></i> Send Message</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-default btn-sm btn-block"><i class="fa fa-user"></i> Add as friend</button> </div> </div> </div> </div> </div> </div> <div class="col-sm-4"> <!-- Begin user profile --> <div class="box-info text-center user-profile-2"> <div class="header-cover"> <img src="http://bootdey.com/img/Content/bg_element.jpg" alt="User cover"> </div> <div class="user-profile-inner"> <h4 class="white">Jonny doe</h4> <img src="http://bootdey.com/img/Content/user-453533-fdadfd.png" class="img-circle profile-avatar" alt="User avatar"> <h5>Administrator</h5> <!-- User button --> <div class="user-button"> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-primary btn-sm btn-block"><i class="fa fa-envelope"></i> Send Message</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-default btn-sm btn-block"><i class="fa fa-user"></i> Add as friend</button> </div> </div> </div> </div> </div> </div> </div>
body{ background:#EEEEEE; } .user-profile-2 { text-align: center; position: relative; margin-top:10px; } .box-info { position: relative; padding: 15px; background: #fff; color: #5b5b5b; margin-bottom: 20px; -webkit-transition: All 0.4s ease; -moz-transition: All 0.4s ease; -o-transition: All 0.4s ease; border-bottom:4px solid #DDDDDD; } .user-profile-2 .header-cover { position: absolute; left: 0; top: 0; right: 0; height: 130px; overflow: hidden; z-index: 1; } .user-profile-2 .user-profile-inner { z-index: 2; position: relative; } .user-profile-2 .user-profile-inner h4.white { color: #fff; } .user-profile-2 .user-profile-inner img.profile-avatar { box-shadow: 0 0 0 5px rgba(255,255,255,1); -moz-box-shadow: 0 0 0 5px rgba(255,255,255,1); -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,1); border: none; width:100px; height:100px; } .user-button { margin: 15px 0; }
Dey-Dey

List user profiles

Dey-Dey
  Jul 22nd 2014, 11:46
5.9K Views