Search
Menu
  1. Welcome
Search

Counters Shortcodes

You can show the counters in different layout styles.

Default

0
0
0
0

HTML Shortcode 

 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
 
<div class="counters">
    <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>

Sizes

0
0
0
0
0
0
0
0
0
0
0
0

HTML Shortcode 

 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<div class="row mb-xlg">
    <div class="counters counters-sm">
        <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="row mb-xlg">
    <div class="counters">
        <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="row">
    <div class="counters counters-lg">
        <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>

Colors

0
0
0
0

HTML Shortcode 

 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="row">
    <div class="counters">
        <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>

About Our Company

Call Centers 24x7® is a premier US-based customer service and tech support call center, also offering fulfillment services, software and customization of software including hosted CRM and phone systems. Based in Port Angeles, Washington State. Since 2002.

Get in touch

Follow Us

Animations

0
0
0
0

HTML Shortcode 

 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
 
<div class="row">
    <div class="counters">
        <div class="col-md-3 col-sm-6">
            <div data-appear-animation-delay="300" data-appear-animation="bounceIn" class="counter counter-primary">
                <em class="fa 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="fa 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="fa 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="fa fa-bar-chart"></em>
                <strong data-to="178">0</strong>
                <label>High Score</label>
            </div>
        </div>
    </div>
</div>

With Borders

0
0
0
0

HTML Shortcode 

 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
 
<h4>With Borders</h4>
<div class="row">
    <div class="counters with-borders">
        <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>

Special Content

0
$ 0
0 %
0

HTML Shortcode 

 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">
    <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>

Options

0
0

Inline

Porto has more than 0 happy customers.

Porto has more than 0 happy customers.

HTML Shortcode 

 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
 
<div class="row mb-xlg">
    <div class="col-md-6">
        <h4>Options</h4>
        <div class="row">
            <div class="counters">
                <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>
    </div>
    <div class="col-md-5 col-md-offset-1">
        <h4>Inline</h4>
        <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>
    </div>
</div>
0
0
0
0

HTML Shortcode

 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="row">
            <div class="counters counters-text-dark">
                <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>
0
0
0
0

HTML Shortcode

 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-primary">
    <div class="container">
        <div class="row">
            <div class="counters counters-text-light">
                <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>

Parallax

0
0
0
0

HTML Shortcode

 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
37
38
39
40
41
42
43
 
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h4>Parallax</h4>
        </div>
    </div>
</div>
<section class="parallax section section-text-light section-parallax section-center mt-none" data-stellar-background-ratio="0" style="background-image: url(/img/parallax-image.jpg);">
    <div class="container">
        <div class="row">
            <div class="counters counters-text-light">
                <div class="col-md-3 col-sm-6">
                    <div class="counter">
                        <i class="fa fa-user"></i>
                        <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">
                        <i class="fa fa-star"></i>
                        <strong data-to="15">0</strong>
                        <label>Years in Business</label>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="counter">
                        <i class="fa fa-coffee"></i>
                        <strong data-to="352">0</strong>
                        <label>Cups of Coffee</label>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="counter">
                        <i class="fa fa-bar-chart"></i>
                        <strong data-to="178">0</strong>
                        <label>High Score</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

With Icons

0
0
0
0

HTML Shortcode

 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
37
38
39
40
41
42
 
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h4>With Icons</h4>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="counters">
            <div class="col-md-3 col-sm-6">
                <div class="counter counter-primary">
                    <em class="fa 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="fa 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="fa fa-coffee"></em>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="counter counter-side-icon counter-primary">
                    <em class="fa fa-bar-chart"></em>
                    <strong data-to="178">0</strong>
                    <label>High Score</label>
                </div>
            </div>
        </div>
    </div>
</div>
Copyright 2026 by Call Centers 24x7 Terms Of Use Privacy Statement
Back To Top