Bootstrap framework snippet user profile description

This bootstrap framework snippet "user profile description" was 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: html,widget

<div class="container bootstrap snippet"> <div class="row"> <div class="col-md-8"> <!--Profile Heading--> <!--===================================================--> <div class="panel"> <div class="panel-bg-cover"> <img class="img-responsive" src="" alt="Image"> </div> <div class="panel-media"> <img src="" class="panel-media-img img-circle img-border-light" alt="Profile Picture"> <div class="row"> <div class="col-md-7"> <h3 class="panel-media-heading">Deyson Bejarano</h3> <a href="#" class="btn-link">@amazing-dey</a> <p class="text-muted mar-btm">Web and Graphic designer</p> </div> <div class="col-md-5 pull-right"> <button class="btn btn-sm btn-primary">Add Friend</button> <button class="btn btn-sm btn-success btn-icon glyphicon glyphicon-envelope"></button> </div> </div> </div> <div class="panel-body"> <h4>Consectetur adipisicing</h4> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> <!--===================================================--> </div> </div> </div>
body{ margin-top:20px; background:#eee; } .panel { box-shadow: 0 2px 0 rgba(0,0,0,0.05); border-radius: 0; border: 0; margin-bottom: 24px; } .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05); } .panel .panel-bg-cover { max-height: 180px; overflow: hidden; } .panel .panel-bg-cover img { min-width: 100%; min-height: 100%; background-size: cover; } .panel-media { box-shadow: 0 -50px 20px -10px rgba(0,0,0,0.2); padding: 10px 15px 15px 140px; position: relative; } .panel-media-img { position: absolute; width: 96px; height: 96px; left: 20px; top: -48px; } .img-border-light { box-shadow: 0 0 0 4px #fff; } @media (min-width: 1200px){ .text-lg-right { text-align: right; } } .panel-media-heading { color: #fff; position: absolute; top: -2.7em; } .btn-link { border-color: transparent; } .text-muted, a.text-muted:hover, a.text-muted:focus, a.text-muted:focus { color: #606060; } .mar-btm { margin-bottom: 15px; } .panel-body { padding: 25px 20px; }

Creator of this snippet

Dey Dey

Bootstrap version: 3.3.4

Created: Jun 30th 2015, 23:05

Views: 2.0K