Counter

<div class="block-counter block-counter-default wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-1g"></div>
      <div class="block-counter-text text-uppercase h4">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-2g"></div>
      <div class="block-counter-text text-uppercase h4">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-3g"></div>
      <div class="block-counter-text text-uppercase h4">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-4g"></div>
      <div class="block-counter-text text-uppercase h4">e-mails sent</div>
    </div>
  </div>
</div>

<div class="block-counter block-counter-colored wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-1h"></div>
      <div class="block-counter-text text-uppercase h4">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-2h"></div>
      <div class="block-counter-text text-uppercase h4">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-3h"></div>
      <div class="block-counter-text text-uppercase h4">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-4h"></div>
      <div class="block-counter-text text-uppercase h4">e-mails sent</div>
    </div>
  </div>
</div>

<div class="block-counter block-counter-icons wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-icon">
        <i class="fa fa-users"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-1k"></div>
      <div class="block-counter-text text-uppercase h4">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-icon">
        <i class="fa fa-database"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-2k"></div>
      <div class="block-counter-text text-uppercase h4">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-icon">
        <i class="fa fa-coffee"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-3k"></div>
      <div class="block-counter-text text-uppercase h4">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-icon">
        <i class="fa fa-envelope-o"></i>
      </div>
      <div class="block-counter-itself" id="block-counter-4k"></div>
      <div class="block-counter-text text-uppercase h4">e-mails sent</div>
    </div>
  </div>
</div>

<div class="block-counter block-counter-icon-box wow fadeIn">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-users icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-1i"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-database icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-2i"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-coffee icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-3i"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-envelope-o icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-4i"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="block-counter block-counter-icon-box-2 icon-box-centered wow fadeIn">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter-center icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-users icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-1j"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter-center icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-database icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-2j"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter-center icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-coffee icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-3j"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-3">
        <div class="icon-box-counter-center icon-anim-1a-black icon-box-border-black">
          <div class="icon-wrapper">
            <i class="fa fa-envelope-o icon circle-block"></i>
          </div>
          <div class="icon-box-content">
            <div class="block-counter-itself" id="block-counter-4j"></div>
            <p class="m-t">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="block-counter block-counter-small block-counter-small-init wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-md">
      <div class="block-counter-itself" id="block-counter-1l"></div>
      <div class="block-counter-text text-uppercase h5">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-md">
      <div class="block-counter-itself" id="block-counter-2l"></div>
      <div class="block-counter-text text-uppercase h5">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-md">
      <div class="block-counter-itself" id="block-counter-3l"></div>
      <div class="block-counter-text text-uppercase h5">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-md">
      <div class="block-counter-itself" id="block-counter-4l"></div>
      <div class="block-counter-text text-uppercase h5">e-mails sent</div>
    </div>
  </div>
</div>

<div class="block-counter block-counter-large wow fadeIn">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-1m"></div>
      <div class="block-counter-text text-uppercase h4">happy clients</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-2m"></div>
      <div class="block-counter-text text-uppercase h4">datacenters</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-3m"></div>
      <div class="block-counter-text text-uppercase h4">cups of coffee</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 text-center m-b-lg">
      <div class="block-counter-itself" id="block-counter-4m"></div>
      <div class="block-counter-text text-uppercase h4">e-mails sent</div>
    </div>
  </div>
</div>

<div class="block-counter block-counter-inline wow fadeIn">

  <h5 class="average-heading"><i class="fa fa-globe"></i> <span id="block-counter-1n"></span> community members at the moment</h5>
  <br>
  <p class="lead-alt"><i class="fa fa-inbox"></i> New <span id="block-counter-2n"></span> messages in your inbox</p>
  <br>
  <p class="h3 slab"><i class="fa fa-user"></i> <span id="block-counter-3n"></span> users are online</p>
  <br>
  <div class="alert alert-success" role="alert">
    We've already served <i class="fa fa-smile-o"></i> <b><span id="block-counter-4n"></span></b> happy clients. Be the next!
  </div>

</div>