Bootstrap snippet: Profile page

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: bootstrap,snippet,profile,page,user,panel,widget

<div class="row" style="margin-left:20px;"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="panel panel-default plain profile-panel"> <div class="panel-heading white-content p-left p-right"> <img class="profile-image img-responsive" src="" alt="profile cover"> </div> <div class="panel-body"> <div class="col-lg-4 col-md-4 col-sm-12"> <div class="profile-avatar"> <img class="img-responsive" src="" alt="profile picture"> </div> </div> <div class="col-lg-8 col-md-8 col-sm-12"> <div class="user-name"> Full name <span class="label label-success">admin</span> </div> <div class="user-information"> <p>Creating awesome snippet for bootdey, bootdey is a gellery of free bootstrap snippets</p> </div> <div class="profile-stats-info"> <a href="#" title="Views"> <i class="glyphicon glyphicon-eye-open"> </i> <strong>2000</strong></a> <a href="#" title="Comments"> <i class="glyphicon glyphicon-comment"> </i> <strong>120</strong></a> <a href="#" title="Likes"> <i class="glyphicon glyphicon-thumbs-up"> </i> <strong>60</strong></a> </div> </div> </div> <div class="panel-footer white-content"> <ul class="profile-info"> <li><i class="glyphicon glyphicon-phone"></i> +534 354 534</li> <li><i class="glyphicon glyphicon-map-marker"></i> Medellin, colombia</li> <li><i class="glyphicon glyphicon-envelope"></i></li> <li><i class="glyphicon glyphicon-edit"></i> Web developer</li> <li><i class="glyphicon glyphicon-share"></i></li> </ul> </div> </div> </div> </div>
.profile-panel .profile-info { padding: 0; margin: 0; list-style: none; } .panel-footer { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; color: #fff; } .panel-footer { padding: 10px 15px; background-color: #f3f5f6; border-top: 1px solid #ddd; } .panel-default .panel-footer { color: #768399; background-color: #e4e9eb; border: 1px solid #e4e9eb; border-top: none; } .panel.plain .panel-footer { border-top: none; } .panel-footer .white-content { color: #768399; background: #fff; background-color: #fff; } .profile-panel .profile-stats-info a { font-size: 24px; margin-right: 10px; margin-top: 10px; color: #79859b; } .profile-panel .user-name { margin-top: 10px; font-size: 22px; margin-bottom: 10px; } .profile-panel .profile-avatar img { border-radius: 50%; border: 1px solid #e7e7e2; } .profile-panel .profile-avatar { border-radius: 50%; padding: 10px; border: 1px solid #e7e7e2; float: left; } .panel-default .panel-body { border: 1px solid #e4e9eb; border-top: none; } .panel-body { padding: 15px; } .profile-panel .profile-image { border-top-left-radius: 4px; border-top-right-radius: 4px; } .panel { position: relative; margin-bottom: 25px; border-radius: 4px; border: 0; box-shadow: none; } .panel-default { border-color: #e4e9eb; } .panel.plain .panel-default .panel-heading { border: 1px solid #e4e9eb; border-bottom: none; } .panel.plain .panel-heading { border-bottom: none; } .panel.panel-default .panel-heading { color: #768399; } .panel-heading .white-content { color: #768399; background: #fff; background-color: #fff; } .panel-default .panel-heading { color: #768399; background-color: #e4e9eb; border-color: #e4e9eb; } .white-content { color: #768399; background: #fff; background-color: #fff; } .p-left { padding-left: 0!important; } .p-right { padding-right: 0!important; } .panel-heading { padding: 0 15px; min-height: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; }

Profile page

  Aug 9th 2014, 17:01