Add Dynamic Website Counters with Bootstrap Snippet

Create dynamic website counters with this responsive Bootstrap snippet. Showcase milestones like projects, clients, or years of service with interactive animations.

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body {
    font-family: "Nunito", sans-serif;
}

.fw_counter_6 {
    text-align: center;
    padding: 70px 0;
    background: #f2f2f2;
}

.fw_counter_6 .title h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 28px;
}

.fw_counter_6 .fws_content {
    text-align: center;
    padding: 50px 20px 50px 20px;
    position: relative;
}

.fw_counter_6 .fws_content:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: -6px;
    top: -6px;
    border-style: solid;
    border-width: 2px 0px 0px 2px;
    border-color: #db5200;
    transition: 0.5s all ease;
}

.fw_counter_6 .fws_content:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -6px;
    bottom: -6px;
    border-style: solid;
    border-width: 0px 2px 2px 0px;
    border-color: #db5200;
    transition: 0.5s all ease;
}

.fw_counter_6 .fws_content .hide_text {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #eaecef;
    position: absolute;
    font-size: 80px;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    opacity: 0.5;
    font-family: 'Anton', sans-serif;
}

@media (max-width: 991px) {
    .fw_counter_6 .fws_content {
        margin-bottom: 50px;
    }
}

JS

function visible(partial) {
            var $t = partial,
                $w = jQuery(window),
                viewTop = $w.scrollTop(),
                viewBottom = viewTop + $w.height(),
                _top = $t.offset().top,
                _bottom = _top + $t.height(),
                compareTop = partial === true ? _bottom : _top,
                compareBottom = partial === true ? _top : _bottom;
            return ((compareBottom <= viewBottom) && (compareTop >= viewTop) && $t.is(':visible'));
        }

$(document).ready(function () {
            // Check if the counter section is visible on page load
            if (visible($('.fws_digit'))) {
                startCounter();
            }

// Also start the counter on scroll if it becomes visible
            $(window).scroll(function () {
                if (visible($('.fws_digit'))) {
                    startCounter();
                }
            });
        });

Width:

Height:

Why Use a Counter Component on Your Website?

Seeking to put focus on your accomplishments dynamically? Bootstrap snippet could be great. Perhaps you want to integrate an engaging counter snippet into website. This counter gets it done perfectly. You could use it to display years of service. It might be to showcase happy customers. You might even use it for completed projects or other milestones. This responsive counter snippet integrates into your design.

Constructed with Bootstrap 5. This snippet guarantees that your counters look stunning on all devices. An animated increment effect is a great eye-catcher. It grabs users' attention as they scroll to the counter section. Therefore it becomes an interactive piece for your visitors.

Adding this counter to your website is easy. You copy the snippet. Include required Bootstrap and jQuery libraries. Customize to align to your branding.

Boost your site's professionalism. Captivate users. This is easy with this visually appealing counter component. You can highlight your milestones effortlessly. Make a lasting impression with this versatile Bootstrap snippet! Highlighting your milestones has never been easier. This snippet lets you do it effortlessly. It also allows you to make a lasting impact. Not to mention, the snippet is versatile. It is also built using Bootstrap. It's a flexible and reliable choice for boosting your site. Now is your chance to use it. Make the most of it!