{"id":3520,"date":"2019-01-27T10:05:43","date_gmt":"2019-01-27T04:35:43","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=3520"},"modified":"2026-10-15T13:50:10","modified_gmt":"2026-10-15T08:20:10","slug":"how-to-section-counter-using-bootstrap-4","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/how-to-section-counter-using-bootstrap-4\/","title":{"rendered":"How to Create an Animated Section Counter Using Bootstrap 4, CSS, and jQuery"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Post Date:<\/strong> January 27, 2019<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Last Updated:<\/strong> October 14, 2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">An animated counter gradually increases a number from zero to a specified value, making statistics more engaging and visually appealing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, we will learn how to create a responsive, animated section counter using <strong>Bootstrap 4, CSS, Font Awesome, and jQuery<\/strong>. You can customize the icons, colors, labels, and counter values to match your website design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before implementing the section counter, ensure you have the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Basic knowledge of HTML and CSS.<\/li>\n\n\n\n<li>Basic knowledge of JavaScript and jQuery.<\/li>\n\n\n\n<li>Bootstrap 4 for responsive layout and styling.<\/li>\n\n\n\n<li>Font Awesome for icons.<\/li>\n\n\n\n<li>A text editor such as Visual Studio Code.<\/li>\n\n\n\n<li>A modern web browser for testing.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Implementation<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create the HTML Structure<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create an HTML file named <code>index.html<\/code>. Add the following code to define the section heading and four statistical counters.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The example uses Bootstrap 4&#8217;s grid system to organize the counters into responsive columns.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n    &lt;title>Animated Project Counter&lt;\/title>\n\n    &lt;!-- Bootstrap 4 CSS -->\n    &lt;link\n        rel=\"stylesheet\"\n        href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.6.2\/dist\/css\/bootstrap.min.css\"\n    >\n\n    &lt;!-- Font Awesome Icons -->\n    &lt;link\n        rel=\"stylesheet\"\n        href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"\n    >\n\n    &lt;!-- Custom CSS -->\n    &lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;\/head>\n&lt;body>\n\n    &lt;section class=\"section-counter\">\n        &lt;div class=\"container\">\n            &lt;div class=\"section-title\">\n                &lt;h2>Project Statistics&lt;\/h2>\n                &lt;p>Our achievements at a glance&lt;\/p>\n            &lt;\/div>\n\n            &lt;div class=\"row project-facts\">\n\n                &lt;div class=\"col-6 col-md-3\">\n                    &lt;div class=\"counter-item\">\n                        &lt;i class=\"fa fa-briefcase\" aria-hidden=\"true\">&lt;\/i>\n                        &lt;p class=\"counter-number\" data-target=\"12\">0&lt;\/p>\n                        &lt;span class=\"counter-divider\">&lt;\/span>\n                        &lt;p class=\"counter-label\">Projects Completed&lt;\/p>\n                    &lt;\/div>\n                &lt;\/div>\n\n                &lt;div class=\"col-6 col-md-3\">\n                    &lt;div class=\"counter-item\">\n                        &lt;i class=\"fa fa-smile-o\" aria-hidden=\"true\">&lt;\/i>\n                        &lt;p class=\"counter-number\" data-target=\"55\">0&lt;\/p>\n                        &lt;span class=\"counter-divider\">&lt;\/span>\n                        &lt;p class=\"counter-label\">Happy Professors&lt;\/p>\n                    &lt;\/div>\n                &lt;\/div>\n\n                &lt;div class=\"col-6 col-md-3\">\n                    &lt;div class=\"counter-item\">\n                        &lt;i class=\"fa fa-coffee\" aria-hidden=\"true\">&lt;\/i>\n                        &lt;p class=\"counter-number\" data-target=\"359\">0&lt;\/p>\n                        &lt;span class=\"counter-divider\">&lt;\/span>\n                        &lt;p class=\"counter-label\">Techie Students&lt;\/p>\n                    &lt;\/div>\n                &lt;\/div>\n\n                &lt;div class=\"col-6 col-md-3\">\n                    &lt;div class=\"counter-item\">\n                        &lt;i class=\"fa fa-camera\" aria-hidden=\"true\">&lt;\/i>\n                        &lt;p class=\"counter-number\" data-target=\"246\">0&lt;\/p>\n                        &lt;span class=\"counter-divider\">&lt;\/span>\n                        &lt;p class=\"counter-label\">Alumni Survey&lt;\/p>\n                    &lt;\/div>\n                &lt;\/div>\n\n            &lt;\/div>\n        &lt;\/div>\n    &lt;\/section>\n\n    &lt;!-- jQuery -->\n    &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.7.1.min.js\">&lt;\/script>\n\n    &lt;!-- Bootstrap 4 JavaScript dependencies -->\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/popper.js@1.16.1\/dist\/umd\/popper.min.js\">&lt;\/script>\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.6.2\/dist\/js\/bootstrap.min.js\">&lt;\/script>\n\n    &lt;!-- Custom JavaScript -->\n    &lt;script src=\"script.js\">&lt;\/script>\n\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add CSS Styling<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create a file named <code>style.css<\/code> in the same directory as your HTML file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following CSS styles the section heading, background colors, icons, numbers, and responsive layout.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {\n    font-family: Arial, Helvetica, sans-serif;\n    margin: 0;\n    color: #333;\n}\n\n.section-counter {\n    padding: 50px 0;\n}\n\n.section-title {\n    text-align: center;\n    margin-bottom: 30px;\n}\n\n.section-title h2 {\n    font-size: 30px;\n    font-weight: 700;\n    margin-bottom: 10px;\n}\n\n.section-title p {\n    font-size: 16px;\n    color: #666;\n}\n\n.project-facts {\n    margin-top: 20px;\n}\n\n.counter-item {\n    min-height: 230px;\n    padding: 40px 15px;\n    text-align: center;\n    background-color: #101f2e;\n    transition: background-color 0.3s ease;\n    height: 100%;\n}\n\n.project-facts > div:nth-child(2) .counter-item {\n    background-color: #122233;\n}\n\n.project-facts > div:nth-child(3) .counter-item {\n    background-color: #152638;\n}\n\n.project-facts > div:nth-child(4) .counter-item {\n    background-color: #172c42;\n}\n\n.counter-item:hover {\n    background-color: #244563;\n}\n\n.counter-item i {\n    font-size: 45px;\n    color: rgba(255, 255, 255, 0.85);\n    margin-bottom: 15px;\n}\n\n.counter-number {\n    font-size: 38px;\n    font-weight: 700;\n    color: #fff;\n    margin: 0;\n}\n\n.counter-divider {\n    display: block;\n    width: 60px;\n    height: 2px;\n    background-color: rgba(255, 255, 255, 0.8);\n    margin: 12px auto;\n}\n\n.counter-label {\n    font-size: 16px;\n    color: rgba(255, 255, 255, 0.85);\n    margin: 0;\n}\n\n.counter-item:hover i,\n.counter-item:hover .counter-number,\n.counter-item:hover .counter-label {\n    color: #fff;\n}\n\n.counter-item:hover .counter-divider {\n    background-color: #fff;\n}\n\n@media (max-width: 767.98px) {\n    .section-counter {\n        padding: 30px 0;\n    }\n\n    .counter-item {\n        min-height: 210px;\n        padding: 30px 10px;\n        margin-bottom: 15px;\n    }\n\n    .counter-item i {\n        font-size: 35px;\n    }\n\n    .counter-number {\n        font-size: 30px;\n    }\n\n    .counter-label {\n        font-size: 14px;\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add jQuery Animation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create a file named <code>script.js<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This script animates each counter from zero to the target number specified in its <code>data-target<\/code> attribute.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(document).ready(function () {\n    $('.counter-number').each(function () {\n        var $counter = $(this);\n        var target = parseInt($counter.attr('data-target'), 10);\n\n        $({ count: 0 }).animate(\n            { count: target },\n            {\n                duration: 2500,\n                easing: 'swing',\n                step: function () {\n                    $counter.text(Math.floor(this.count));\n                },\n                complete: function () {\n                    $counter.text(target);\n                }\n            }\n        );\n    });\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The animation starts when the page loads. Each number gradually increases until it reaches its target value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Run and Test the Section Counter<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">After creating all three files, make sure the directory structure looks like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">section-counter\/\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 style.css\n\u2514\u2500\u2500 script.js<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to test the implementation:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Save all three files in the same directory.<\/li>\n\n\n\n<li>Open <code>index.html<\/code> in a web browser.<\/li>\n\n\n\n<li>Verify that the section heading and four counter cards are displayed.<\/li>\n\n\n\n<li>Confirm that the numbers animate from zero to their target values.<\/li>\n\n\n\n<li>Resize the browser window to check the responsive layout on desktop and mobile screens.<\/li>\n\n\n\n<li>Test the icons and styling to ensure that the external CSS and JavaScript resources load correctly.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">If the animation does not work, open the browser&#8217;s developer tools and check the Console for JavaScript errors. Also verify that jQuery loads successfully before <code>script.js<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Customize the Counter Values and Icons<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can easily modify the counter values and labels to suit your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, to change the number of completed projects from 12 to 100, update the corresponding HTML element:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p class=\"counter-number\" data-target=\"100\">0&lt;\/p>\n&lt;p class=\"counter-label\">Projects Completed&lt;\/p><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">To change an icon, replace the Font Awesome class. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;i class=\"fa fa-users\" aria-hidden=\"true\">&lt;\/i><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can also customize the card backgrounds, font sizes, animation duration, and labels through the CSS and JavaScript files.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> Bootstrap 4 is a legacy framework. For new projects, consider Bootstrap 5, which does not require jQuery for its core JavaScript components.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. What is a section counter?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A section counter is a website component that displays numerical statistics, such as completed projects, customers, employees, or other achievements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Can I use a section counter without Bootstrap?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Why is jQuery used in this example?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">jQuery simplifies DOM selection and provides the <code>animate()<\/code> method used to create the numerical counting effect.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. How can I change the counter speed?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Update the <code>duration<\/code> property in <code>script.js<\/code>. The value is measured in milliseconds. For example, <code>1500<\/code> creates a shorter animation than <code>3000<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Can I add more than four counters?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. Add another counter card inside the <code>.row<\/code> element and assign the appropriate Bootstrap column class. The existing JavaScript automatically processes additional elements with the <code>counter-number<\/code> class.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Is Bootstrap 4 suitable for new projects?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related Articles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/\">Front-end Development \u2013 CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/pheonixsolutions.com\/blog\/how-to-change-css-property-using-onclick\/\">HOW TO CHANGE CSS PROPERTY USING ONCLICK<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/pheonixsolutions.com\/blog\/how-to-use-transform-property-in-css\/\">HOW TO USE TRANSFORM PROPERTY IN CSS<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Need Help with Bootstrap and Front-End Development?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pheonixsolutions.com\/\" data-type=\"link\" data-id=\"https:\/\/pheonixsolutions.com\/\">Pheonix Solutions<\/a> provides web development, responsive UI design, and front-end implementation services to help businesses create engaging digital experiences.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you need assistance building a responsive website or implementing custom UI components, contact our team through the <a href=\"https:\/\/pheonixsolutions.com\/contact\/\">Pheonix Solutions Contact Page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Post Date: January 27, 2019 Last Updated: October 14, 2026 Introduction Section counters are a popular user interface element used [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[479,546,545,496,495,544],"class_list":["post-3520","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-bootstrap-4","tag-bs4","tag-counter","tag-css","tag-html","tag-section-counter","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-UM","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=3520"}],"version-history":[{"count":3,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3520\/revisions"}],"predecessor-version":[{"id":12329,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3520\/revisions\/12329"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=3520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=3520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=3520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}