You can show the counters in different layout styles.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<div class="counters"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
<div class="counters counters-sm"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div>
<div class="counters counters-lg"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div>
<div class="counters"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-secondary"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-tertiary"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-quaternary"> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
<section class="section section-default"> <div class="container"> <div class="counters counters-text-dark"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div> </div> </section>
<section class="section section-primary"> <div class="container"> <div class="counters counters-text-light"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div> </div> </section>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
<section class="parallax section section-text-light section-parallax section-center mt-none" data-plugin-options="{'speed': 1.5}" data-plugin-parallax="parallax" data-image-src="/portals/1/img/parallax-image.jpg"> <div class="container"> <div class="counters counters-text-light"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <em class="fas fa-user"></em> <strong data-to="19000" data-append="+">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <em class="fas fa-star"></em> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <em class="fas fa-coffee"></em> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <em class="fas fa-chart-bar"></em> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div> </div> </section>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
<div class="container"> <div class="counters"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <em class="fas fa-user"></em> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <em class="fas fa-star"></em> <label>Years in Business</label> <strong data-to="15">0</strong> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> <em class="fas fa-coffee"></em> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-side-icon counter-primary"> <em class="fas fa-chart-bar"></em> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div> </div>
<div class="counters"> <div class="row"> <div class="col-md-3 col-sm-6"> <div data-appear-animation-delay="300" data-appear-animation="bounceIn" class="counter counter-primary"> <em class="fas fa-user"></em> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div data-appear-animation-delay="600" data-appear-animation="bounceIn" class="counter counter-primary"> <em class="fas fa-star"></em> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div data-appear-animation-delay="900" data-appear-animation="bounceIn" class="counter counter-primary"> <em class="fas fa-coffee"></em> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div data-appear-animation-delay="1200" data-appear-animation="bounceIn" class="counter counter-primary"> <em class="fas fa-chart-bar"></em> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div>
<div class="counters with-borders"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-to="19000" data-append="+">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
<div class="counters"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-plugin-options="{'decimals': 2}" data-to="70.13">0</strong> <label>Decimals</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-with-unit counter-primary"> <strong>$</strong> <strong data-to="15">0</strong> <label>Currency</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-with-unit counter-primary"> <strong data-to="78">0</strong> <strong>%</strong> <label>Percentual</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-append="+" data-to="5000">0</strong> <label>Append Symbol</label> </div> </div> </div> </div>
<div class="counters"> <div class="row"> <div class="col-md-6"> <div class="counter counter-primary"> <strong data-to="1000" data-plugin-options="{'speed': 5000}">0</strong> <label>Speed</label> </div> </div> <div class="col-md-6"> <div class="counter counter-primary"> <strong data-to="1000" data-plugin-options="{'refreshInterval': 500}">0</strong> <label>Refresh Interval</label> </div> </div> </div> </div>
Porto has more than 0 happy customers.
1 2 3 4 5 6
<div class="row"> <div class="col-md-12"> <p>Porto has more than <strong data-to="19000" data-plugin-counter="DataCounter" data-plugin-options="{'speed': 3500}">0</strong> happy customers.</p> <p>Porto has more than <strong class="alternative-font" data-to="19000" data-plugin-counter="DataCounter" data-plugin-options="{'speed': 3500}">0</strong> happy customers.</p> </div> </div>