followers list

This bootstrap snippet called "followers list" 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: followers,users,list,social network

HTML code

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

<div class="container bootstrap snippet">
    <div class="row mb-4x mt-4x">
        <div class="col-xs-12 bg-white">
          <div class="p-2x">
            <h1>You Have 1,248 Followers</h1>
            <p class="lead">83% of them are your Customers.</p>
          </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-6">
          <div class="panel fade in panel-default" data-init-panel="true">
            <div class="embed-responsive embed-responsive-16by9 corner-top">
              <img class="embed-responsive-item" src="https://lorempixel.com/250/250/nature/8/" alt="cover">
              <div class="embed-overlay bg-grd-dark"></div>
            </div>
        
            <div class="embed-extend-item">
              <a href="#" class="kit-avatar kit-avatar-96 border-white pull-left">
                <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="avatar">
              </a>
              <h3 class="subhead"><a href="#">Maribel Padilla</a> <small>UI Designer</small></h3>
            </div>
        
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-4 bordered-right">
                  <h5 class="text-center"><small>STARS</small><br><strong>1,397</strong></h5>
                </div>
                <div class="col-xs-4 bordered-right">
                  <h5 class="text-center"><small>PROJECTS</small><br><strong>26</strong></h5>
                </div>
                <div class="col-xs-4">
                  <h5 class="text-center"><small>SALES</small><br><strong>24,170</strong></h5>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        
        <div class="col-md-6 col-sm-6">
          <div class="panel fade in panel-default" data-init-panel="true">
            <div class="embed-responsive embed-responsive-16by9 corner-top">
              <img class="embed-responsive-item" src="https://lorempixel.com/250/250/nature/2/" alt="cover">
              <div class="embed-overlay bg-grd-dark"></div>
            </div>
        
            <div class="embed-extend-item">
              <a href="#" class="kit-avatar kit-avatar-96 border-white pull-left">
                <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="avatar">
              </a>
              <h3 class="subhead"><a href="#">Maribel Padilla</a> <small>UI Designer</small></h3>
            </div>
        
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-4 bordered-right">
                  <h5 class="text-center"><small>STARS</small><br><strong>1,397</strong></h5>
                </div>
                <div class="col-xs-4 bordered-right">
                  <h5 class="text-center"><small>PROJECTS</small><br><strong>26</strong></h5>
                </div>
                <div class="col-xs-4">
                  <h5 class="text-center"><small>SALES</small><br><strong>24,170</strong></h5>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        
        <div class="col-md-6 col-sm-6">
          <div class="panel fade in panel-default" data-init-panel="true">
            <div class="embed-responsive embed-responsive-16by9 corner-top">
              <img class="embed-responsive-item" src="https://lorempixel.com/250/250/nature/4/" alt="cover">
              <div class="embed-overlay bg-grd-dark"></div>
            </div>
        
            <div class="embed-extend-item">
              <a href="#" class="kit-avatar kit-avatar-96 border-white pull-left">
                <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="avatar">
              </a>
              <h3 class="subhead"><a href="#">Maribel Padilla</a> <small>UI Designer</small></h3>
            </div>
        
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-4 bordered-right">
                  <h5 class="text-center"><small>STARS</small><br><strong>1,397</strong></h5>
                </div>
                <div class="col-xs-4 bordered-right">
                  <h5 class="text-center"><small>PROJECTS</small><br><strong>26</strong></h5>
                </div>
                <div class="col-xs-4">
                  <h5 class="text-center"><small>SALES</small><br><strong>24,170</strong></h5>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        
        <div class="col-md-6 col-sm-6">
          <div class="panel fade in panel-default" data-init-panel="true">
            <div class="embed-responsive embed-responsive-16by9 corner-top">
              <img class="embed-responsive-item" src="https://lorempixel.com/250/250/nature/5/" alt="cover">
              <div class="embed-overlay bg-grd-dark"></div>
            </div>
        
            <div class="embed-extend-item">
              <a href="#" class="kit-avatar kit-avatar-96 border-white pull-left">
                <img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="avatar">
              </a>
              <h3 class="subhead"><a href="#">Maribel Padilla</a> <small>UI Designer</small></h3>
            </div>
        
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-4 bordered-right">
                  <h5 class="text-center"><small>STARS</small><br><strong>1,397</strong></h5>
                </div>
                <div class="col-xs-4 bordered-right">
                  <h5 class="text-center"><small>PROJECTS</small><br><strong>26</strong></h5>
                </div>
                <div class="col-xs-4">
                  <h5 class="text-center"><small>SALES</small><br><strong>24,170</strong></h5>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</div>

CSS code

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

body{
    margin-top:20px;
    background-color: #F5F7FA;
}
.mb-4x {
    margin-bottom: 24px;
}
.mt-4x {
    margin-top: 24px;
}
.bg-white {
    background-color: #fff!important;
    color: rgba(22,24,27,.87);
}
.panel {
    border: none;
    box-shadow: 0 1px 3px -1px rgba(22,24,27,.26);
    transition: background-color 250ms ease,opacity 250ms linear;
}
.panel-default {
    border-color: rgba(22,24,27,.12);
}
.corner-all, .corner-right, .corner-top, .corner-tr {
    border-top-right-radius: 2px;
}
.corner-all, .corner-left, .corner-tl, .corner-top {
    border-top-left-radius: 2px;
}
.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
.bg-grd-dark, .bg-grd-inverse {
    background: linear-gradient(45deg,#0a0213 0,rgba(10,2,19,0) 70%),linear-gradient(135deg,#07252c 10%,rgba(7,37,44,0) 80%),linear-gradient(225deg,#031b49 10%,rgba(3,27,73,0) 80%),linear-gradient(315deg,#100462 100%,rgba(16,4,98,0) 70%);
}
.embed-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .6;
    filter: alpha(opacity=60);
}
.embed-extend-item {
    position: relative;
    padding: 0 15px 5px;
}
.embed-extend-item>.kit-avatar.kit-avatar-96 {
    margin-top: -48px;
}
.embed-extend-item>.kit-avatar.pull-left {
    margin-right: 10px;
}
.embed-extend-item>.kit-avatar {
    position: relative;
    padding: 0;
}
.kit-avatar.kit-avatar-96 {
    border: 3px solid rgba(22,24,27,.12);
    border-radius: 96px;
}
.embed-extend-item a, .embed-extend-item a:hover {
    color: inherit;
    text-decoration: none;
}
.kit-avatar.kit-avatar-96>img {
    width: 96px;
    height: auto;
    border-radius: 48px;
}
.embed-extend-item h3, .embed-extend-item h4, .embed-extend-item h5, .embed-extend-item h6 {
    margin: 0;
    padding-top: 3px;
}
.embed-extend-item h3>small, .embed-extend-item h4>small, .embed-extend-item h5>small, .embed-extend-item h6>small {
    display: block;
    color: rgba(22,24,27,.54);
}
.body-text, .headline, .subhead, .title {
    color: rgba(22,24,27,.87);
}
.h4, .subhead, h4 {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.bordered, .bordered-right {
    border-right: 1px solid rgba(22,24,27,.12)!important;
}
                                    

Similar snippets

Bootstrap snippet bs4 project list

bs4 project list

View

Bootstrap snippet bs4 new friends panel

bs4 new friends panel

View

Bootstrap snippet bs4 project grid

bs4 project grid

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Oct 17th 2015, 21:50

Views: 2.9K

Rated 5/5 based on 4 reviews