Bootstrap snippet: profile cards 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,cards,social network



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row bootstrap snippets"> <div class="col-md-3"> <div class="panel widget"> <div class="widget-header bg-primary"></div> <div class="widget-body text-center"> <img alt="Profile Picture" class="widget-img img-circle img-border-light" src="http://bootdey.com/img/Content/avatar/avatar1.png"> <h4 class="mar-no">John Doe</h4> <p class="text-muted mar-btm">Administrator</p> <div class="pad-ver"> <button class="btn btn-primary">Follow</button> <button class="btn btn-success">Message</button> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel widget"> <div class="widget-header bg-success"></div> <div class="widget-body text-center"> <img alt="Profile Picture" class="widget-img img-circle img-border" src="http://bootdey.com/img/Content/avatar/avatar2.png"> <h4 class="mar-no">Donald Brown</h4> <p class="text-muted mar-btm">Web and Graphic designer</p> <div class="pad-ver"> <a class="btn btn-default btn-icon btn-hover-primary fa fa-facebook icon-lg add-tooltip" href="#" title="" data-original-title="Facebook"></a> <a class="btn btn-default btn-icon btn-hover-info fa fa-twitter icon-lg add-tooltip" href="#" title="" data-original-title="Twitter"></a> <a class="btn btn-default btn-icon btn-hover-danger fa fa-google-plus icon-lg add-tooltip" href="#" title="" data-original-title="Google+"></a> <a class="btn btn-default btn-icon btn-hover-mint fa fa-envelope icon-lg add-tooltip" href="#" title="" data-original-title="Email"></a> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel widget"> <div class="widget-header bg-purple"> <img class="widget-bg img-responsive" src="http://lorempixel.com/500/320/nature/8/" alt="Image"> </div> <div class="widget-body text-center"> <img alt="Profile Picture" class="widget-img img-border-light" src="http://bootdey.com/img/Content/avatar/avatar3.png"> <h4 class="mar-no">Lucy Moon</h4> <p class="text-muted mar-btm">Art Designer</p> <ul class="list-unstyled text-center pad-top mar-no clearfix"> <li class="col-xs-4"> <span class="text-lg">1,345</span> <p class="text-muted text-uppercase"> <small>Following</small> </p> </li> <li class="col-xs-4"> <span class="text-lg">23,456</span> <p class="text-muted text-uppercase"> <small>Followers</small> </p> </li> <li class="col-xs-4"> <span class="text-lg">52,678</span> <p class="text-muted text-uppercase"> <small>Likes</small> </p> </li> </ul> </div> </div> </div> <div class="col-md-3"> <div class="panel text-center"> <div class="panel-body"> <img alt="Avatar" class="img-md img-circle img-border mar-btm" src="http://bootdey.com/img/Content/avatar/avatar4.png"> <h4 class="mar-no">Brenda Fuller</h4> <p>Project manager</p> </div> <div class="pad-all"> <p class="text-muted"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <div class="pad-btm"> <button class="btn btn-primary">Follow</button> <button class="btn btn-success">Message</button> </div> </div> </div> </div> </div>
body{ margin-top:20px; background:#ebeef0; } .panel { box-shadow: 0 2px 0 rgba(0,0,0,0.075); border-radius: 0; border: 0; margin-bottom: 24px; } .panel .panel-heading, .panel>:first-child { border-top-left-radius: 0; border-top-right-radius: 0; } .bg-primary, .bg-primary a { color: #fff; } .bg-primary { background-color: #5fa2dd; } .bg-success, .bg-success a { color: #fff; } .bg-success { background-color: #91c957; } .widget-header { padding: 15px 15px 50px 15px; min-height: 125px; position: relative; overflow: hidden; } .panel .panel-footer, .panel>:last-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .widget-body { padding: 50px 15px 15px; position: relative; } .panel-body { padding: 25px 20px; } .pad-all { padding: 15px; } .widget-img { position: absolute; width: 64px; height: 64px; left: 50%; margin-left: -32px; top: -32px; } .img-md { width: 64px; height: 64px; } .widget-bg { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; } .img-border-light { box-shadow: 0 0 0 4px #fff; } .img-border { box-shadow: 0 0 0 4px rgba(0,0,0,0.1); } .mar-no { margin: 0 !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; } .text-muted, a.text-muted:hover, a.text-muted:focus, a.text-muted:focus { color: #606060; } .mar-btm { margin-bottom: 15px; } .pad-ver { padding-top: 15px; padding-bottom: 15px; } .pad-btm { padding-bottom: 15px; } .pad-top { padding-top: 8px; } .small, small { font-size: 65%; } .text-lg { font-size: 75%; } .btn { cursor: pointer; padding: 6px 12px; border-radius: 0; border: 1px solid 0; font-size: 11px; line-height: 1.42857; vertical-align: middle; -webkit-transition: all .25s; transition: all .25s; }
Dey-Dey

profile cards widget

Dey-Dey
  Feb 19th, 08:45
2.1K Views