resume user profile widget

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

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 bootstrap snippet">
    <div class="col-md-4">
      <div class="box box-widget widget-user-2">
        <div class="widget-user-header bg-yellow">
          <div class="widget-user-image">
            <img class="img-circle" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="User Avatar">
          </div>
          <h3 class="widget-user-username">Nadia Carmichael</h3>
          <h5 class="widget-user-desc">Lead Developer</h5>
        </div>
        <div class="box-footer no-padding">
          <ul class="nav nav-stacked">
            <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li>
            <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li>
            <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li>
            <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <div class="box box-widget widget-user-2">
        <div class="widget-user-header bg-red">
          <div class="widget-user-image">
            <img class="img-circle" src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="User Avatar">
          </div>
          <h3 class="widget-user-username">Nadia Carmichael</h3>
          <h5 class="widget-user-desc">Lead Developer</h5>
        </div>
        <div class="box-footer no-padding">
          <ul class="nav nav-stacked">
            <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li>
            <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li>
            <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li>
            <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <div class="box box-widget widget-user-2">
        <div class="widget-user-header bg-aqua">
          <div class="widget-user-image">
            <img class="img-circle" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="User Avatar">
          </div>
          <h3 class="widget-user-username">Nadia Carmichael</h3>
          <h5 class="widget-user-desc">Lead Developer</h5>
        </div>
        <div class="box-footer no-padding">
          <ul class="nav nav-stacked">
            <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li>
            <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li>
            <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li>
            <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li>
          </ul>
        </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);
}
.box-widget .widget-user-header {
    padding: 20px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.widget-user-desc {
    margin-left: 75px;
    color:#fff;
     margin-top: 0;
}
.widget-user-username {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 25px;
    font-weight: 300;
    color:#fff;
}
.widget-user-image>img {
    width: 65px;
    height: auto;
    float: left;
}
.no-padding {
    padding: 0 !important;
}
.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 .nav-stacked>li {
    border-bottom: 1px solid #f4f4f4;
    margin: 0;
}
.nav-stacked>li>a {
    border-radius: 0;
    border-top: 0;
    border-left: 3px solid transparent;
    color: #444;
}
.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;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.5

Created: Jan 16th 2016, 21:27

Views: 3.1K

Rated 5/5 based on 2 reviews