jQuery counter section HTML is created by using Bootstrap 5 CSS to make it responsive counts section. Where we can showcase our achievements numbers like your projects, happy clients, hours of work, and more.

The count up section animation starts the increment number when you scroll to the section instead of page loading.

Related Code Snippets

Count Up and jQuery CDN Links

Count Up and jQuery CDN links are mandatory to make the numbers count up section on the website. There are two library counts CDN links that are will be performed with jQuery library code.

<!-- jQuery Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <!-- Counts JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>

Add HTML

<!-- Counts Section -->
    <section class="counts-section">
        <h1 class="mx-auto d-table my-5 text-secondary">Our Achievement</h1>
        <div class="bg-primary text-white py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-6 text-center">
                        <h2 data-toggle="counterUp">142</h2>
                        <h6>Clients</h6>
                    </div>
                    <div class="col-lg-3 col-6 text-center">
                        <h2 data-toggle="counterUp">455</h2>
                        <h6>Projects</h6>
                    </div>
                    <div class="col-lg-3 col-6 text-center">
                        <h2 data-toggle="counterUp">4,262</h2>
                        <h6>Hours Of Support</h6>
                    </div>
                    <div class="col-lg-3 col-6 text-center">
                        <h2 data-toggle="counterUp">25</h2>
                        <h6>Hard Workers</h6>
                    </div>
                </div>
            </div>
        </div>
    </section>

Add jQuery

It is a small jQuery code where we can manage the speed and duration of the performance.

<script type="text/javascript">
        // jQuery counterUp
        $('[data-toggle="counterUp"]').counterUp({
            delay: 15,
            time: 1500
        });
    </script>

jQuery Counter Section Full Source Code

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>jQuery Counter Section HTML In Bootstrap 5</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://www.markuptag.com/bootstrap/5/css/bootstrap.min.css">
    
        <!-- jQuery Library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
        <!-- Counts JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
    </head>
    <body>
        <!-- Counts Section -->
        <section class="counts-section">
            <h1 class="mx-auto d-table my-5 text-secondary">Our Achievement</h1>
            <div class="bg-primary text-white py-5">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-6 text-center">
                            <h2 data-toggle="counterUp">142</h2>
                            <h6>Clients</h6>
                        </div>
                        <div class="col-lg-3 col-6 text-center">
                            <h2 data-toggle="counterUp">455</h2>
                            <h6>Projects</h6>
                        </div>
                        <div class="col-lg-3 col-6 text-center">
                            <h2 data-toggle="counterUp">4,262</h2>
                            <h6>Hours Of Support</h6>
                        </div>
                        <div class="col-lg-3 col-6 text-center">
                            <h2 data-toggle="counterUp">25</h2>
                            <h6>Hard Workers</h6>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    
        <!-- Bootstrap JS -->
        <script src="https://www.markuptag.com/bootstrap/5/js/bootstrap.bundle.min.js"></script>
        <script type="text/javascript">
            // jQuery counterUp
            $('[data-toggle="counterUp"]').counterUp({
                delay: 15,
                time: 1500
            });
        </script>
    </body>
    </html>