Counters allow you to showcase your skills or completed projects in a running numbers. You can easily copy and paste the counter block codes anywhere on your Web-Boots theme. In addition, there are also two countdown timer styles you can use for product launch and maintenance mode page layouts.
Ensure to replace the text, image and video content in the demo code with your own content.
Counters Style 1
<section class="counters1 counters cid-rkNJVKjyfm" id="counters1-13">
<div class="container">
<h2 class="wn-section-title pb-3 align-center wn-fonts-style display-2">
Counters Style 1</h2>
<h3 class="wn-section-subtitle wn-fonts-style display-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<div class="container pt-4 mt-2">
<div class="media-container-row">
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-img pb-3">
<span class="wns-mobi wn-iconfont"></span>
</div>
<div class="card-text">
<h3 class="count pt-3 pb-3 wn-fonts-style display-2">
100
</h3>
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">
Unlimited websites
</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-img pb-3">
<span class="wns-touch-swipe wn-iconfont"></span>
</div>
<div class="card-text">
<h3 class="count pt-3 pb-3 wn-fonts-style display-2">
200
</h3>
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">
Trendy websites blocks
</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="card p-3 align-center col-12 col-md-6 col-lg-4">
<div class="panel-item p-3">
<div class="card-img pb-3">
<span class="wns-responsive wn-iconfont"></span>
</div>
<div class="card-text">
<h3 class="count pt-3 pb-3 wn-fonts-style display-2">
300
</h3>
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">
Bootstrap
</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Counters Style 2
<section class="counters2 counters cid-rkNJWlPWyR" id="counters2-14">
<div class="container pt-4 mt-2">
<div class="media-container-row">
<div class="media-block" style="width: 49%;">
<h2 class="wn-section-title pb-3 align-left wn-fonts-style display-2">
Counters Style 2</h2>
<h3 class="wn-section-subtitle pb-5 align-left wn-fonts-style display-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<div class="wn-figure">
<img src="assets/images/background6.jpg">
</div>
</div>
<div class="cards-block">
<div class="cards-container">
<div class="card px-3 align-left col-12 col-md-6">
<div class="panel-item p-3">
<div class="card-img pb-3">
<span class="wns-mobi wn-iconfont pr-2"></span>
<h3 class="count py-3 wn-fonts-style display-2">
100
</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">
Unlimited websites
</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="card px-3 align-left col-12 col-md-6">
<div class="panel-item p-3">
<div class="card-img pb-3">
<span class="wns-extension wn-iconfont pr-2"></span>
<h3 class="count py-3 wn-fonts-style display-2">
200
</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">
Trendy websites blocks
</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="card px-3 align-left col-12 col-md-6">
<div class="panel-item p-3">
<div class="card-img pb-3">
<span class="wns-responsive wn-iconfont pr-2"></span>
<h3 class="count py-3 wn-fonts-style display-2">
300
</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">
Bootstrap
</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="card px-3 align-left col-12 col-md-6">
<div class="panel-item p-3">
<div class="card-img pb-3">
<span class="wns-globe-2 wn-iconfont pr-2"></span>
<h3 class="count py-3 wn-fonts-style display-2">
100
</h3>
</div>
<div class="card-texts">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">
Web fonts
</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Counters Style 3
<section class="counters3 counters cid-rkNJX6AlzY" id="counters3-15">
<div class="container pt-4 mt-2">
<h2 class="wn-section-title pb-3 align-center wn-fonts-style display-2">
Counters Style 3</h2>
<h3 class="wn-section-subtitle pb-5 align-center wn-fonts-style display-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<div class="media-container-row">
<div class="media-block m-auto" style="width: 49%;">
<div class="wn-figure">
<img src="assets/images/background6.jpg">
</div>
</div>
<div class="cards-block">
<div class="cards-container"> <div class="card px-3 align-left col-12"> <div class="panel-item p-4 d-flex align-items-center"> <div class="card-img pr-3 d-flex align-items-center align-left"> <h3 class="count py-3 wn-fonts-style display-2"> 100 </h3> </div> <div class="card-text"> <h4 class="wn-content-title wn-bold wn-fonts-style display-7"> Unlimited websites </h4> <p class="wn-content-text wn-fonts-style display-7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div> <div class="card px-3 align-left col-12"> <div class="panel-item p-4 d-flex align-items-center"> <div class="card-img pr-3 d-flex align-items-center align-left"> <h3 class="count py-3 wn-fonts-style display-2"> 200 </h3> </div> <div class="card-text"> <h4 class="wn-content-title wn-bold wn-fonts-style display-7"> Trendy websites blocks </h4> <p class="wn-content-text wn-fonts-style display-7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div> <div class="card px-3 align-left col-12"> <div class="panel-item p-4 d-flex align-items-center"> <div class="card-img pr-3 d-flex align-items-center align-left"> <h3 class="count py-3 wn-fonts-style display-2"> 300 </h3> </div> <div class="card-text"> <h4 class="wn-content-title wn-bold wn-fonts-style display-7"> Bootstrap </h4> <p class="wn-content-text wn-fonts-style display-7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="card px-3 align-left col-12"> <div class="panel-item p-4 d-flex align-items-center"> <div class="card-img pr-3 d-flex align-items-center align-left"> <h3 class="count py-3 wn-fonts-style display-2"> 100 </h3> </div> <div class="card-texts"> <h4 class="wn-content-title wn-bold wn-fonts-style display-7"> Web fonts </h4> <p class="wn-content-text wn-fonts-style display-7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div> </div> </div> </div> </div> </section>
Counters Style 4
<section class="counters4 counters cid-rkNJYEHArh" id="counters4-16">
<div class="container pt-4 mt-2">
<h2 class="wn-section-title pb-3 align-center wn-fonts-style display-2">Counters Style 4</h2>
<h3 class="wn-section-subtitle pb-5 align-center wn-fonts-style display-5">
Responsive block with counters and media.
</h3>
<div class="media-container-row">
<div class="media-block m-auto" style="width: 49%;">
<div class="wn-figure">
<img src="assets/images/background6.jpg">
</div>
</div>
<div class="cards-block">
<div class="cards-container">
<div class="card px-3 align-left col-12">
<div class="panel-item p-4 d-flex align-items-start">
<div class="card-img pr-3">
<h3 class="img-text d-flex align-items-center justify-content-center">
1
</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">Honest and Dependable</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae cupiditate rerum ipsum tempora vero.</p>
</div>
</div>
</div>
<div class="card px-3 align-left col-12">
<div class="panel-item p-4 d-flex align-items-start">
<div class="card-img pr-3">
<h3 class="img-text d-flex align-items-center justify-content-center">
2
</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">We Are Always Improving</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
</div>
<div class="card px-3 align-left col-12">
<div class="panel-item p-4 d-flex align-items-start">
<div class="card-img pr-3">
<h3 class="img-text d-flex align-items-center justify-content-center">
3
</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">We Are Passionate</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae cupiditate rerum ipsum tempora vero.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Counters Style 5
<section class="counters5 counters cid-rkNK2sBywh" id="counters5-17">
<div class="container pt-4 mt-2">
<h2 class="wn-section-title pb-3 align-center wn-fonts-style display-2">Counters Style 5</h2>
<h3 class="wn-section-subtitle pb-5 align-center wn-fonts-style display-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<div class="row justify-content-center">
<div class="cards-block">
<div class="cards-container">
<div class="card px-3 align-left col-12">
<div class="panel-item p-4 d-flex">
<div class="card-img pr-3">
<h3 class="img-text d-flex align-items-center justify-content-center">
1
</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">Honest and Dependable</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae cupiditate rerum ipsum tempora vero.</p>
</div>
</div>
</div>
<div class="card px-3 align-left col-12">
<div class="panel-item p-4 d-flex">
<div class="card-img pr-3">
<h3 class="img-text d-flex align-items-center justify-content-center">
2
</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">We Are Always Improving</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
</div>
<div class="card px-3 align-left col-12">
<div class="panel-item p-4 d-flex">
<div class="card-img pr-3">
<h3 class="img-text d-flex align-items-center justify-content-center">
3
</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">We Are Passionate</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae cupiditate rerum ipsum tempora vero.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Counters Style 6
<section class="counters6 counters cid-rkNK39Pe5p" id="counters6-18">
<div class="container pt-4 mt-2">
<h2 class="wn-section-title pb-3 align-center wn-fonts-style display-2">Counters Style 6</h2>
<h3 class="wn-section-subtitle pb-5 align-center wn-fonts-style display-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<div>
<div class="cards-container">
<div class="card col-12 col-md-6 col-lg-4 pb-md-4">
<div class="panel-item align-center">
<div class="card-img pb-3">
<h3 class="img-text wn-fonts-style display-1">01.</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">Honest and Dependable</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-4 pb-md-4">
<div class="panel-item align-center">
<div class="card-img pb-3">
<h3 class="img-text wn-fonts-style display-1">02.</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">We Are Always Improving</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="card col-12 col-md-6 col-lg-4 last-child">
<div class="panel-item align-center">
<div class="card-img pb-3">
<h3 class="img-text wn-fonts-style display-1">03.</h3>
</div>
<div class="card-text">
<h4 class="wn-content-title wn-bold wn-fonts-style display-7">We Are Passionate</h4>
<p class="wn-content-text wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Countdown Style 1
<section class="countdown1 cid-rkNK6j83US" id="countdown1-19">
<div class="container ">
<h2 class="wn-section-title pb-3 align-center wn-fonts-style display-2">
Countdown Style 1</h2>
<h3 class="wn-section-subtitle align-center wn-fonts-style display-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</div>
<div class="container countdown-cont align-center">
<div class="daysCountdown" title="Days"></div>
<div class="hoursCountdown" title="Hours"></div>
<div class="minutesCountdown" title="Minutes"></div>
<div class="secondsCountdown" title="Seconds"></div>
<div class="countdown pt-5 mt-2" data-due-date="2021/01/01">
</div>
</div>
</section>Countdown Style 2
<section class="countdown2 cid-rkNK72hUa6" id="countdown2-1a">
<div class="container">
<h2 class="wn-section-title pb-3 align-center wn-fonts-style display-2">
Countdown Style 2</h2>
<h3 class="wn-section-subtitle align-center wn-fonts-style display-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</div>
<div class="container pt-5 mt-2">
<div class=" countdown-cont align-center p-4">
<div class="event-name align-left wn-white ">
<h4 class="wn-fonts-style display-5">EVENT NAME</h4>
</div>
<div class="countdown align-center py-2" data-due-date="2020/01/01">
</div>
<div class="daysCountdown" title="Days"></div>
<div class="hoursCountdown" title="Hours"></div>
<div class="minutesCountdown" title="Minutes"></div>
<div class="secondsCountdown" title="Seconds"></div>
<div class="event-date align-left wn-white">
<h5 class="wn-fonts-style display-7">Enter more details if you need...</h5>
</div>
</div>
</div>
</section>Change data-due-date value to set the timer.