widget user

This bootstrap snippet called "widget user" 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: user,profile,widget,resume

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

<div class="row">
    <div class="col-md-4">
      <div class="box box-widget widget-user">
        <div class="widget-user-header bg-aqua">
          <h3 class="widget-user-username">Alexander Pierce</h3>
          <h5 class="widget-user-desc">Founder &amp; CEO</h5>
        </div>
        <div class="widget-user-image">
          <img class="img-circle" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="User Avatar">
        </div>
        <div class="box-footer">
          <div class="row">
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">3,200</h5>
                <span class="description-text">SALES</span>
              </div>
            </div>
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">13,000</h5>
                <span class="description-text">FOLLOWERS</span>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="description-block">
                <h5 class="description-header">35</h5>
                <span class="description-text">PRODUCTS</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <div class="box box-widget widget-user">
        <div class="widget-user-header bg-red">
          <h3 class="widget-user-username">Alexander Pierce</h3>
          <h5 class="widget-user-desc">Founder &amp; CEO</h5>
        </div>
        <div class="widget-user-image">
          <img class="img-circle" src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="User Avatar">
        </div>
        <div class="box-footer">
          <div class="row">
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">3,200</h5>
                <span class="description-text">SALES</span>
              </div>
            </div>
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">13,000</h5>
                <span class="description-text">FOLLOWERS</span>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="description-block">
                <h5 class="description-header">35</h5>
                <span class="description-text">PRODUCTS</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <div class="box box-widget widget-user">
        <div class="widget-user-header bg-yellow">
          <h3 class="widget-user-username">Alexander Pierce</h3>
          <h5 class="widget-user-desc">Founder &amp; CEO</h5>
        </div>
        <div class="widget-user-image">
          <img class="img-circle" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="User Avatar">
        </div>
        <div class="box-footer">
          <div class="row">
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">3,200</h5>
                <span class="description-text">SALES</span>
              </div>
            </div>
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">13,000</h5>
                <span class="description-text">FOLLOWERS</span>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="description-block">
                <h5 class="description-header">35</h5>
                <span class="description-text">PRODUCTS</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <div class="box box-widget widget-user">
        <div class="widget-user-header bg-yellow" style="background: url('https://lorempixel.com/500/320/nature/8/') center center;">
          <h3 class="widget-user-username">Alexander Pierce</h3>
          <h5 class="widget-user-desc">Founder &amp; CEO</h5>
        </div>
        <div class="widget-user-image">
          <img class="img-circle" src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="User Avatar">
        </div>
        <div class="box-footer">
          <div class="row">
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">3,200</h5>
                <span class="description-text">SALES</span>
              </div>
            </div>
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">13,000</h5>
                <span class="description-text">FOLLOWERS</span>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="description-block">
                <h5 class="description-header">35</h5>
                <span class="description-text">PRODUCTS</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <div class="box box-widget widget-user">
        <div class="widget-user-header bg-yellow" style="background: url('https://lorempixel.com/500/320/nature/1/') center center;">
          <h3 class="widget-user-username">Alexander Pierce</h3>
          <h5 class="widget-user-desc">Founder &amp; CEO</h5>
        </div>
        <div class="widget-user-image">
          <img class="img-circle" src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="User Avatar">
        </div>
        <div class="box-footer">
          <div class="row">
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">3,200</h5>
                <span class="description-text">SALES</span>
              </div>
            </div>
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">13,000</h5>
                <span class="description-text">FOLLOWERS</span>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="description-block">
                <h5 class="description-header">35</h5>
                <span class="description-text">PRODUCTS</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <div class="box box-widget widget-user">
        <div class="widget-user-header bg-yellow" style="background: url('https://lorempixel.com/500/320/nature/2/') center center;">
          <h3 class="widget-user-username">Alexander Pierce</h3>
          <h5 class="widget-user-desc">Founder &amp; CEO</h5>
        </div>
        <div class="widget-user-image">
          <img class="img-circle" src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="User Avatar">
        </div>
        <div class="box-footer">
          <div class="row">
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">3,200</h5>
                <span class="description-text">SALES</span>
              </div>
            </div>
            <div class="col-sm-4 border-right">
              <div class="description-block">
                <h5 class="description-header">13,000</h5>
                <span class="description-text">FOLLOWERS</span>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="description-block">
                <h5 class="description-header">35</h5>
                <span class="description-text">PRODUCTS</span>
              </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

body{
    margin-top:20px;
    background:#eee;
}
.box-widget {
    border: none;
    position: relative;
}
.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.widget-user .widget-user-header {
    padding: 20px;
    height: 120px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}
.bg-yellow {
    background-color: #f39c12 !important;
}
.bg-blue {
    background-color: #0073b7 !important;
}
.bg-aqua {
    background-color: #00c0ef !important;
}
.bg-green {
    background-color: #00a65a !important;
}
.bg-red {
    background-color: #dd4b39 !important;
}
.widget-user .widget-user-username {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 25px;
    font-weight: 300;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    color:#fff;
}
.widget-user .widget-user-desc {
    margin-top: 0;
    color:#fff;
}

.widget-user .widget-user-image {
    position: absolute;
    top: 65px;
    left: 50%;
    margin-left: -45px;
}
.widget-user .widget-user-image>img {
    width: 90px;
    height: auto;
    border: 3px solid #fff;
}
.widget-user .box-footer {
    padding-top: 30px;
}
.box-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #f4f4f4;
    padding: 10px;
    background-color: #fff;
}
.box .border-right {
    border-right: 1px solid #f4f4f4;
}
.description-block {
    display: block;
    margin: 10px 0;
    text-align: center;
}
.description-block>.description-header {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 16px;
}
.description-block>.description-text {
    text-transform: uppercase;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.5

Created: Jan 16th 2016, 21:50

Views: 4.7K

Rated 5/5 based on 6 reviews