Counters

Use Leaf's custom animated counters to showcase numbers and statistics.

Default example

Change the numbers inside the .counter element to update the content of the counter.

500 Happy people
1560 Units Ordered
5478 Subscribers
12031 Lines of Code 
                                                        
<div class="row">
    <!--Counter-->
    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-dark d-block">500</span>
        <span class="h5 text-gray">Happy people</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-dark d-block">1560</span>
        <span class="h5 text-gray">Units Ordered</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-dark d-block">5478</span>
        <span class="h5 text-gray">Subscribers</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-dark d-block">12031</span>
        <span class="h5 text-gray">Lines of Code</span>
    </div>
    <!--End of Counter-->
</div>
Color variations

Use modifier classes .text-* (eg. .text-primary) on the text elements to update their color.

500 Happy people
1560 Units Ordered
5478 Subscribers
12031 Lines of Code 
                                                        
<div class="row">
    <!--Counter-->
    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-primary d-block">500</span>
        <span class="h5 text-gray">Happy people</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-secondary d-block">1560</span>
        <span class="h5 text-gray">Units Ordered</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-tertiary d-block">5478</span>
        <span class="h5 text-gray">Subscribers</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-6 col-lg-3 mb-4 mb-lg-0">
        <span class="counter display-3 text-info d-block">12031</span>
        <span class="h5 text-gray">Lines of Code</span>
    </div>
    <!--End of Counter-->
</div>
Icons

Using the following markup you can use icons above the counters:

500 Happy people
1560 Units Ordered
5478 Subscribers
12031 Lines of Code 
                                                        
<div class="row">
    <!--Counter-->
    <div class="col-6 mb-3 col-lg-3 mb-lg-0">
        <div class="icon icon-shape icon-shape-primary rounded-circle mr-2 mr-md-0 mb-2">
            <i class="far fa-grin-hearts"></i>
        </div>
        <span class="counter display-3 text-primary d-block">500</span>
        <span class="h5 text-gray">Happy people</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-6 mb-3 col-lg-3 mb-lg-0">
        <div class="icon icon-shape icon-shape-secondary mr-2 mr-md-0 mb-2">
            <i class="fas fa-box-open"></i>
        </div>
        <span class="counter display-3 text-secondary d-block">1560</span>
        <span class="h5 text-gray">Units Ordered</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-6 mb-3 col-lg-3 mb-lg-0">
        <div class="icon icon-shape icon-tertiary mr-2 mr-md-0 mb-2">
            <div class="organic-shape scale-1">
                <svg class="organic-shape-tertiary" width="90" height="90" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                    <g transform="translate(300,300)">
                        <path d="M115.7,-146.8C141.8,-115.9,149.2,-71.8,157.7,-27.3C166.2,17.3,175.7,62.1,166.4,112.8C157.1,163.4,128.8,219.8,90.1,223.5C51.4,227.1,2.3,177.9,-45.8,150C-93.9,122,-140.9,115.2,-152.3,90.4C-163.7,65.6,-139.5,22.6,-125.9,-16.7C-112.4,-55.9,-109.5,-91.5,-90.3,-123.7C-71.1,-155.8,-35.6,-184.4,4.6,-189.9C44.8,-195.4,89.6,-177.7,115.7,-146.8Z" />
                    </g>
                </svg>   
            </div>
            <div class="z-2"><i class="fas fa-fingerprint"></i></div>
        </div>
        <span class="counter display-3 text-tertiary d-block">5478</span>
        <span class="h5 text-gray">Subscribers</span>
    </div>
    <!--End of Counter-->
    <!--Counter-->
    <div class="col-6 mb-3 col-lg-3 mb-lg-0">
        <div class="icon icon-info mr-2 mr-md-0 mb-4">
            <i class="fas fa-brain"></i>
        </div>
        <span class="counter display-3 text-info d-block">12031</span>
        <span class="h5 text-gray">Lines of Code</span>
    </div>
    <!--End of Counter-->
</div>