User profile background

This bootstrap snippet called "User profile background" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: bootstrap,snippet,user,profile,options

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


                        
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<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="https://bootdey.com/img/Content/user_1.jpg">
        </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="https://bootdey.com/img/Content/icons/32/PNG/32/rocket.png">
                    </a>
                  </li>
                  <li>
                    <a href="#" class="tip" title="Option">
                      <img class="img-circle" src="https://bootdey.com/img/Content/icons/32/PNG/32/packman.png">
                    </a>
                  </li>
                  <li>
                    <a href="#" class="tip" title="Option">
                      <img class="img-circle" src="https://bootdey.com/img/Content/icons/32/PNG/32/cloud-up.png">
                    </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="https://bootdey.com/img/Content/icons/32/PNG/32/clock.png">
                  </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="https://bootdey.com/img/Content/icons/32/PNG/32/photo.png">
                  </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>                    

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


                        
.content{
    background-image: url(http://lorempixel.com/600/600/technics/7/);
}
.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;
}                    
                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview


                        
$(function(){
 $('.tip').tooltip();
});                     

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Aug 23rd 2014, 23:57

Views: 5.5K

Rated 5/5 based on 2 reviews