Bootstrap snippet: friends panel 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: panel,list,friends



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <div class="media"> <div class="pull-left"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="people" class="media-object img-circle"> </div> <div class="media-body"> <h4 class="media-heading margin-v-5"><a href="#">Adrian D.</a></h4> <div class="profile-icons"> <span><i class="fa fa-users"></i> 372</span> <span><i class="fa fa-photo"></i> 43</span> <span><i class="fa fa-video-camera"></i> 3</span> </div> </div> </div> </div> <div class="panel-body"> <p class="common-friends">Common Friends</p> <div class="user-friend-list"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="people" class="img-circle"> </a> </div> </div> <div class="panel-footer"> <a href="#" class="btn btn-default btn-sm">Follow <i class="fa fa-share"></i></a> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <div class="media"> <div class="pull-left"> <img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt="people" class="media-object img-circle"> </div> <div class="media-body"> <h4 class="media-heading margin-v-5"><a href="#">Adrian D.</a></h4> <div class="profile-icons"> <span><i class="fa fa-users"></i> 372</span> <span><i class="fa fa-photo"></i> 43</span> <span><i class="fa fa-video-camera"></i> 3</span> </div> </div> </div> </div> <div class="panel-body"> <p class="common-friends">Common Friends</p> <div class="user-friend-list"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="people" class="img-circle"> </a> </div> </div> <div class="panel-footer"> <a href="#" class="btn btn-default btn-sm">Follow <i class="fa fa-share"></i></a> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <div class="media"> <div class="pull-left"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="people" class="media-object img-circle"> </div> <div class="media-body"> <h4 class="media-heading margin-v-5"><a href="#">Adrian D.</a></h4> <div class="profile-icons"> <span><i class="fa fa-users"></i> 372</span> <span><i class="fa fa-photo"></i> 43</span> <span><i class="fa fa-video-camera"></i> 3</span> </div> </div> </div> </div> <div class="panel-body"> <p class="common-friends">Common Friends</p> <div class="user-friend-list"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="people" class="img-circle"> </a> </div> </div> <div class="panel-footer"> <a href="#" class="btn btn-default btn-sm">Follow <i class="fa fa-share"></i></a> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <div class="media"> <div class="pull-left"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="people" class="media-object img-circle"> </div> <div class="media-body"> <h4 class="media-heading margin-v-5"><a href="#">Adrian D.</a></h4> <div class="profile-icons"> <span><i class="fa fa-users"></i> 372</span> <span><i class="fa fa-photo"></i> 43</span> <span><i class="fa fa-video-camera"></i> 3</span> </div> </div> </div> </div> <div class="panel-body"> <p class="common-friends">Common Friends</p> <div class="user-friend-list"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar7.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="people" class="img-circle"> </a> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="people" class="img-circle"> </a> </div> </div> <div class="panel-footer"> <a href="#" class="btn btn-default btn-sm">Follow <i class="fa fa-share"></i></a> </div> </div> </div> </div>
body{margin-top:20px;} .panel-default > .panel-heading { color: #333333; background-color: #ffffff; border-color: #e2e9e6; } .panel-footer { padding: 10px 15px; background-color: #ffffff; border-top: 1px solid #e2e9e6; border-bottom-right-radius: -1; border-bottom-left-radius: -1; } .user-friend-list img, .media img { height:50px; width:50px; }
Dey-Dey

friends panel list

Dey-Dey
  Sep 11th, 21:11
1.5K Views