Bootstrap snippet: User profile background

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

<link rel="stylesheet" type="text/css" href="//"> <div class="em-background-box text-white content"> <div class="container-fluid"> <div class="text-center em-background-box-content"> <ul class="list-inline"> <li> <a href="#" class="tip" title="Add friend"> <i class="glyphicon glyphicon-plus line-icon-circle"></i> </a> </li> <li> <img class="img-circle img-em-border" src=""> </li> <li> <a href="#" class="tip" title="Send message"> <i class="line-icon glyphicon glyphicon-comment line-icon-circle"></i> </a> </li> </ul> <h1 class="thin">Deyson Bejarano</h1> <h4> <i class="fa fa-map-marker"></i> <span class="thin">Medellin, Colombia</span> </h4> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="semi-well-dk em-background-box-actions"> <div class="row"> <div class="col-md-7 push-bottom-sm"> <ul class="list-inline no-margin v-mid-row"> <li> <a href="#" class="tip" title="Option"> <img class="img-circle" src=""> </a> </li> <li> <a href="#" class="tip" title="Option"> <img class="img-circle" src=""> </a> </li> <li> <a href="#" class="tip" title="Option"> <img class="img-circle" src=""> </a> </li> <li class="text-center"> <h5 class="base-header">Followers</h5> <h4 class="base-header major">4.884</h4> </li> </ul> </div> <div class="col-md-5"> <ul class="list-inline"> <li class="option"> <img class="img-circle" src=""> </li> <li class="text-center"> <h5 class="base-header">Sales</h5> <h4 class="base-header major">$3.593</h4> </li> <li class="option"> <img class="img-circle" src=""> </li> <li class="text-center"> <h5 class="base-header">Followers</h5> <h4 class="base-header major">+84</h4> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div>
.content{ background-image: url(; } .list-inline .option{ width: 80px; height: 30px; } .major { font-weight: 600; } .base-header { margin-top: 0; margin-bottom: 0; line-height: inherit; } .em-background-box .em-background-box-actions { margin-top: 15px; min-height: 50px; } .semi-well-dk { background: rgba(0,0,0,0.3); color: #fff; } .semi-well-dk, .semi-well-lt { border-radius: 6px; padding: 20px; } .img-em-border { border: 8px solid rgba(255,255,255,0.3); } .img-circle { border-radius: 50%; } img { vertical-align: middle; } .line-icon-circle { border: 1px solid rgba(242,244,248,0.7); border-radius: 50%; display: inline-block; width: 32px; height: 32px; line-height: 32px; color: #fff; -webkit-transition: border-color 0.3s; -moz-transition: border-color 0.3s; -o-transition: border-color 0.3s; transition: border-color 0.3s; } .thin { font-weight: 300; } h1, .h1 { font-size: 33px; } .list-inline { margin-left: -5px; } .list-unstyled, .list-inline { padding-left: 0; list-style: none; } ul, ol { margin-top: 0; margin-bottom: 10px; } .em-background-box .em-background-box-content { position: relative; z-index: 2; } .container-fluid { margin-right: auto; margin-left: auto; padding-left: 10px; padding-right: 10px; } .navbar+.em-background-box { margin-top: -15px; margin-bottom: 15px; } .em-background-box { border-bottom: 4px solid #5bc0de; } .em-background-box { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; padding-top: 50px; padding-bottom: 50px; } .text-white { color: white; }
$(function(){ $('.tip').tooltip(); });

User profile background

  Oct 23rd 2014, 16:44