Bootstrap snippet: Panels friends and about

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: profile



<div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading panel-heading-gray"> <div class="pull-right"> <a href="#" class="btn btn-primary btn-xs">Add <i class="fa fa-plus"></i></a> </div> <i class="icon-user-1"></i> Friends </div> <div class="panel-body"> <ul class="img-grid"> <li> <a href="#"> <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-6.jpg" alt="image"> </a> </li> <li> <a href="#"> <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/woman-3.jpg" alt="image"> </a> </li> <li> <a href="#"> <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-2.jpg" alt="image"> </a> </li> <li> <a href="#"> <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-9.jpg" alt="image"> </a> </li> <li> <a href="#"> <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/woman-9.jpg" alt="image"> </a> </li> <li class="clearfix"> <a href="#"> <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-4.jpg" alt="image"> </a> </li> <li> <a href="#"> <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-1.jpg" alt="image"> </a> </li> <li> <a href="#"> <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/woman-4.jpg" alt="image"> </a> </li> <li> <a href="#"> <img src="http://themekit-v4.themekit.io/dist/themes/social-3/images/people/110/guy-6.jpg" alt="image"> </a> </li> <li> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="image"> </a> </li> </ul> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading panel-heading-gray"> <a href="#" class="btn btn-white btn-xs pull-right"><i class="fa fa-pencil"></i></a> <i class="fa fa-fw fa-info-circle"></i> About </div> <div class="panel-body"> <ul class="list-unstyled profile-about margin-none"> <li class="padding-v-5"> <div class="row"> <div class="col-sm-4"><span class="text-muted">Date of Birth</span></div> <div class="col-sm-8">12 January 1990</div> </div> </li> <li class="padding-v-5"> <div class="row"> <div class="col-sm-4"><span class="text-muted">Job</span></div> <div class="col-sm-8">Specialist</div> </div> </li> <li class="padding-v-5"> <div class="row"> <div class="col-sm-4"><span class="text-muted">Gender</span></div> <div class="col-sm-8">Male</div> </div> </li> <li class="padding-v-5"> <div class="row"> <div class="col-sm-4"><span class="text-muted">Lives in</span></div> <div class="col-sm-8">Miami, FL, USA</div> </div> </li> <li class="padding-v-5"> <div class="row"> <div class="col-sm-4"><span class="text-muted">Credits</span></div> <div class="col-sm-8">249</div> </div> </li> </ul> </div> </div> </div>
body{margin-top:20px;} .panel-body > *:last-child { margin-bottom: 0; } ul.img-grid { list-style: none; width: 100%; padding: 0; margin: 0; } ul.img-grid li { float: left; margin: 0; width: 20%; } ul.img-grid li a { display: block; } ul.img-grid li img { width:100px; height:100px; display: inline-block; max-width: 100%; line-height: 1.42857143; background-color: #fff; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /*================== info ============*/ .padding-v-5 { padding-top: 5px !important; padding-bottom: 5px !important; } .margin-none { margin: 0 !important; } .list-unstyled { padding-left: 0; list-style: none; } .padding-v-5 { padding-top: 5px !important; padding-bottom: 5px !important; } .text-muted { color: #777777; }
Dey-Dey

Panels friends and about

Dey-Dey
  May 5th, 10:14
45 Views