Bootstrap snippet: resume user profile widget

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



<div class="row bootstrap snippet"> <div class="col-md-4"> <div class="box box-widget widget-user-2"> <div class="widget-user-header bg-yellow"> <div class="widget-user-image"> <img class="img-circle" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="User Avatar"> </div> <h3 class="widget-user-username">Nadia Carmichael</h3> <h5 class="widget-user-desc">Lead Developer</h5> </div> <div class="box-footer no-padding"> <ul class="nav nav-stacked"> <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li> <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li> <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li> <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li> </ul> </div> </div> </div> <div class="col-md-4"> <div class="box box-widget widget-user-2"> <div class="widget-user-header bg-red"> <div class="widget-user-image"> <img class="img-circle" src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="User Avatar"> </div> <h3 class="widget-user-username">Nadia Carmichael</h3> <h5 class="widget-user-desc">Lead Developer</h5> </div> <div class="box-footer no-padding"> <ul class="nav nav-stacked"> <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li> <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li> <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li> <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li> </ul> </div> </div> </div> <div class="col-md-4"> <div class="box box-widget widget-user-2"> <div class="widget-user-header bg-aqua"> <div class="widget-user-image"> <img class="img-circle" src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="User Avatar"> </div> <h3 class="widget-user-username">Nadia Carmichael</h3> <h5 class="widget-user-desc">Lead Developer</h5> </div> <div class="box-footer no-padding"> <ul class="nav nav-stacked"> <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li> <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li> <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li> <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li> </ul> </div> </div> </div> </div>
body{ margin-top:20px; background:#eee; } .box-widget { border: none; position: relative; } .box { position: relative; border-radius: 3px; background: #ffffff; border-top: 3px solid #d2d6de; margin-bottom: 20px; width: 100%; box-shadow: 0 1px 1px rgba(0,0,0,0.1); } .box-widget .widget-user-header { padding: 20px; border-top-right-radius: 3px; border-top-left-radius: 3px; } .widget-user-desc { margin-left: 75px; color:#fff; margin-top: 0; } .widget-user-username { margin-top: 5px; margin-bottom: 5px; font-size: 25px; font-weight: 300; color:#fff; } .widget-user-image>img { width: 65px; height: auto; float: left; } .no-padding { padding: 0 !important; } .box-footer { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-top: 1px solid #f4f4f4; padding: 10px; background-color: #fff; } .box .nav-stacked>li { border-bottom: 1px solid #f4f4f4; margin: 0; } .nav-stacked>li>a { border-radius: 0; border-top: 0; border-left: 3px solid transparent; color: #444; } .bg-yellow { background-color: #f39c12 !important; } .bg-blue { background-color: #0073b7 !important; } .bg-aqua { background-color: #00c0ef !important; } .bg-green { background-color: #00a65a !important; } .bg-red { background-color: #dd4b39 !important; }
Dey-Dey

resume user profile widget

Dey-Dey
  Mar 2nd, 08:12
1.7K Views