Post Date: January 27, 2019
Last Updated: October 14, 2026
Introduction
Section counters are a popular user interface element used to highlight important statistics on a website. They display numerical information such as completed projects, satisfied customers, students, sales, or other business achievements.
An animated counter gradually increases a number from zero to a specified value, making statistics more engaging and visually appealing.
In this tutorial, we will learn how to create a responsive, animated section counter using Bootstrap 4, CSS, Font Awesome, and jQuery. You can customize the icons, colors, labels, and counter values to match your website design.
Prerequisites
Before implementing the section counter, ensure you have the following:
- Basic knowledge of HTML and CSS.
- Basic knowledge of JavaScript and jQuery.
- Bootstrap 4 for responsive layout and styling.
- Font Awesome for icons.
- A text editor such as Visual Studio Code.
- A modern web browser for testing.
Implementation
Step 1: Create the HTML Structure
Create an HTML file named index.html. Add the following code to define the section heading and four statistical counters.
The example uses Bootstrap 4’s grid system to organize the counters into responsive columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Project Counter</title>
<!-- Bootstrap 4 CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
>
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="section-counter">
<div class="container">
<div class="section-title">
<h2>Project Statistics</h2>
<p>Our achievements at a glance</p>
</div>
<div class="row project-facts">
<div class="col-6 col-md-3">
<div class="counter-item">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<p class="counter-number" data-target="12">0</p>
<span class="counter-divider"></span>
<p class="counter-label">Projects Completed</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="counter-item">
<i class="fa fa-smile-o" aria-hidden="true"></i>
<p class="counter-number" data-target="55">0</p>
<span class="counter-divider"></span>
<p class="counter-label">Happy Professors</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="counter-item">
<i class="fa fa-coffee" aria-hidden="true"></i>
<p class="counter-number" data-target="359">0</p>
<span class="counter-divider"></span>
<p class="counter-label">Techie Students</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="counter-item">
<i class="fa fa-camera" aria-hidden="true"></i>
<p class="counter-number" data-target="246">0</p>
<span class="counter-divider"></span>
<p class="counter-label">Alumni Survey</p>
</div>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Bootstrap 4 JavaScript dependencies -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<!-- Custom JavaScript -->
<script src="script.js"></script>
</body>
</html>
Step 2: Add CSS Styling
Create a file named style.css in the same directory as your HTML file.
The following CSS styles the section heading, background colors, icons, numbers, and responsive layout.
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
color: #333;
}
.section-counter {
padding: 50px 0;
}
.section-title {
text-align: center;
margin-bottom: 30px;
}
.section-title h2 {
font-size: 30px;
font-weight: 700;
margin-bottom: 10px;
}
.section-title p {
font-size: 16px;
color: #666;
}
.project-facts {
margin-top: 20px;
}
.counter-item {
min-height: 230px;
padding: 40px 15px;
text-align: center;
background-color: #101f2e;
transition: background-color 0.3s ease;
height: 100%;
}
.project-facts > div:nth-child(2) .counter-item {
background-color: #122233;
}
.project-facts > div:nth-child(3) .counter-item {
background-color: #152638;
}
.project-facts > div:nth-child(4) .counter-item {
background-color: #172c42;
}
.counter-item:hover {
background-color: #244563;
}
.counter-item i {
font-size: 45px;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 15px;
}
.counter-number {
font-size: 38px;
font-weight: 700;
color: #fff;
margin: 0;
}
.counter-divider {
display: block;
width: 60px;
height: 2px;
background-color: rgba(255, 255, 255, 0.8);
margin: 12px auto;
}
.counter-label {
font-size: 16px;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
.counter-item:hover i,
.counter-item:hover .counter-number,
.counter-item:hover .counter-label {
color: #fff;
}
.counter-item:hover .counter-divider {
background-color: #fff;
}
@media (max-width: 767.98px) {
.section-counter {
padding: 30px 0;
}
.counter-item {
min-height: 210px;
padding: 30px 10px;
margin-bottom: 15px;
}
.counter-item i {
font-size: 35px;
}
.counter-number {
font-size: 30px;
}
.counter-label {
font-size: 14px;
}
}
Step 3: Add jQuery Animation
Create a file named script.js.
This script animates each counter from zero to the target number specified in its data-target attribute.
$(document).ready(function () {
$('.counter-number').each(function () {
var $counter = $(this);
var target = parseInt($counter.attr('data-target'), 10);
$({ count: 0 }).animate(
{ count: target },
{
duration: 2500,
easing: 'swing',
step: function () {
$counter.text(Math.floor(this.count));
},
complete: function () {
$counter.text(target);
}
}
);
});
});
The animation starts when the page loads. Each number gradually increases until it reaches its target value.
Step 4: Run and Test the Section Counter
After creating all three files, make sure the directory structure looks like this:
section-counter/ ├── index.html ├── style.css └── script.js
Follow these steps to test the implementation:
- Save all three files in the same directory.
- Open
index.htmlin a web browser. - Verify that the section heading and four counter cards are displayed.
- Confirm that the numbers animate from zero to their target values.
- Resize the browser window to check the responsive layout on desktop and mobile screens.
- Test the icons and styling to ensure that the external CSS and JavaScript resources load correctly.
If the animation does not work, open the browser’s developer tools and check the Console for JavaScript errors. Also verify that jQuery loads successfully before script.js.
Step 5: Customize the Counter Values and Icons
You can easily modify the counter values and labels to suit your website.
For example, to change the number of completed projects from 12 to 100, update the corresponding HTML element:
<p class="counter-number" data-target="100">0</p> <p class="counter-label">Projects Completed</p>
To change an icon, replace the Font Awesome class. For example:
<i class="fa fa-users" aria-hidden="true"></i>
You can also customize the card backgrounds, font sizes, animation duration, and labels through the CSS and JavaScript files.
Conclusion
Creating an animated section counter using Bootstrap 4, CSS, and jQuery is a simple way to make website statistics more attractive and engaging. By combining responsive grid layouts, customizable icons, and smooth numerical animations, you can display important business or project achievements in a clear format.
You can reuse this component on business websites, educational portals, project dashboards, and portfolio pages. Update the target values, labels, and icons to suit your requirements.
Note: Bootstrap 4 is a legacy framework. For new projects, consider Bootstrap 5, which does not require jQuery for its core JavaScript components.
Frequently Asked Questions
1. What is a section counter?
A section counter is a website component that displays numerical statistics, such as completed projects, customers, employees, or other achievements.
2. Can I use a section counter without Bootstrap?
Yes. You can build the layout entirely with HTML and CSS. Bootstrap is useful for creating a responsive grid quickly, but it is not mandatory.
3. Why is jQuery used in this example?
jQuery simplifies DOM selection and provides the animate() method used to create the numerical counting effect.
4. How can I change the counter speed?
Update the duration property in script.js. The value is measured in milliseconds. For example, 1500 creates a shorter animation than 3000.
5. Can I add more than four counters?
Yes. Add another counter card inside the .row element and assign the appropriate Bootstrap column class. The existing JavaScript automatically processes additional elements with the counter-number class.
6. Is Bootstrap 4 suitable for new projects?
Bootstrap 4 can still be used in existing projects, but it is no longer the recommended choice for new development. Consider using Bootstrap 5 for newer projects.
Related Articles
- Front-end Development – CSS
- HOW TO CHANGE CSS PROPERTY USING ONCLICK
- HOW TO USE TRANSFORM PROPERTY IN CSS
Need Help with Bootstrap and Front-End Development?
Pheonix Solutions provides web development, responsive UI design, and front-end implementation services to help businesses create engaging digital experiences.
If you need assistance building a responsive website or implementing custom UI components, contact our team through the Pheonix Solutions Contact Page.