How to make counter section one by one in Bootstrap 5 ?

Last Updated : 07 Nov, 2023

Counter-sections are often used on websites to highlight important statistics or achievements. They are effective in capturing the attention of visitors and conveying information in a visually pleasing manner. Bootstrap 5 provides classes and components that make it easy to create these sections.

Configuring the Bootstrap 5

Before we dive into creating counter sections, make sure you have Bootstrap 5 integrated into your project. You can do this by including Bootstrap’s CSS and JavaScript files in your HTML document. You can either download Bootstrap locally or use a Content Delivery Network (CDN) for quicker integration.

Approach

Creating the basic structure of the Counter Section:
- Various HTML tags are employed to establish the foundational structure of the project.
- <div>: Used for grouping and structuring content.
- <h1>, <h2>, <h3>, etc: Headings for different sections or titles.
- <p>: For paragraphs and text content.
Styling the Counter Section:
- Bootstrap provides a range of classes for styling counter sections.
- Utilize classes like bg-primary, text-light, rounded, and p-3 to customize the background color, text color, and padding of the counter cards.
- Experiment with these classes to achieve the desired visual appearance for your website.
Adding functionality to the Counter Section using JavaScript:
- Select Counters: Use document.querySelectorAll(‘.counter’) to select all elements with the class “counter.”
- Get Target Values: Extract the target value from the “data-target” attribute for each counter using parseInt(counter.getAttribute(‘data-target’)).
- Set Duration and Speed: Define animation duration and calculate a “step” value to control animation speed.
- Initialize Variables: Initialize the current variable to 0.
- Update Counter: Create updateCounter to increment the current value, update the counter’s text, and request the next animation frame.
- Delay Counters: Use setTimeout with a delay of index * 1000 to ensure sequential counting.
- Start Animation: Call animateCounters() on page load.

Example: This example illustrates the creation of a basic counter section using Bootstrap 5.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <title> 
          Sequential Counters Example 
      </title> 
  
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
          rel="stylesheet" /> 
  
    <style> 
        /* Custom CSS */ 
        body { 
            height: 97vh; 
            background-color: #e6df90; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="h1 text-success text-center mt-3"> 
        GeeksForGeeks 
        <p class="h4 mt-5 text-muted  
                  text-start text-center"> 
            GeeksforGeeks is a leading platform 
            that provides computer science 
            resources and coding challenges 
              for programmers. 
        </p> 
    </div> 
    <div class="container mt-5"> 
        <div class="row  
                    justify-content-center"> 
            <div class="col-md-4"> 
                <div class="card text-center  
                            bg-info text-dark  
                            rounded p-3"> 
                    <div class="card-body"> 
                        <h3 class="card-text counter" 
                            data-target="95"> 
                            0 
                        </h3> 
                        <p class="card-title  
                                  fs-5 text-white"> 
                            No. of Courses we provided 
                        </p> 
                    </div> 
                </div> 
            </div> 
            <div class="col-md-4"> 
                <div class="card text-center bg-info  
                            text-dark rounded p-3"> 
                    <div class="card-body"> 
                        <h3 class="card-text counter" 
                            data-target="150000"> 
                            0 
                        </h3> 
                        <p class="card-title  
                                  fs-5 text-white"> 
                            Enrolled Students 
                        </p> 
                    </div> 
                </div> 
            </div> 
            <div class="col-md-4"> 
                <div class="card text-center bg-info  
                            text-dark rounded p-3"> 
                    <div class="card-body"> 
                        <h3 class="card-text counter" 
                            data-target="1000000"> 
                            0 
                        </h3> 
                        <p class="card-title fs-5 
                                  text-white"> 
                            Registered Students 
                        </p> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script src="./script.js"></script> 
</body> 
  
</html>

Javascript

/* JavaScript to animate the 
   counters sequentially*/
     
function animateCounters() { 
    const counters = 
        document 
            .querySelectorAll(".counter"); 
    counters 
        .forEach((counter, index) => { 
            const target = 
                parseInt(counter 
                    .getAttribute( 
                        "data-target") 
                ); 
            const duration = 1000; 
            const step = 
                Math.ceil( 
                    (target / duration) * 15 
                ); 
            let current = 0; 
  
            const updateCounter = () => { 
                current += step; 
                if (current <= target) { 
                    counter 
                        .innerText = current; 
                    requestAnimationFrame(updateCounter); 
                } else { 
                    counter.innerText = target; 
                } 
            }; 
  
            setTimeout(() => { 
                updateCounter(); 
            }, index * 1000); 
            // Delay each counter by 1 second 
        }); 
} 
  
animateCounters();