Countdown
A versatile timer that counts down to any specific date, displaying time remaining in years, days, hours, minutes, and seconds.
The Countdown component relies on the Timezz plugin.
Data attribute API
Cartzilla adds extra layer of data attribute to access the date option of the plugin right from the HTML document:
data-countdown-date='01/15/2025 12:00:00 UTC-08:00'
- UTC offset can be positive (+) or negative (-).
More on UTC offsets by countries read here.
Basic example
years
:
days
:
hours
:
mins
:
secs
<!-- Basic countdown example -->
<div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
<div class="text-center">
<div class="h4 mb-0" data-years></div>
<span class="fs-sm">years</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
<div class="text-center">
<div class="h4 mb-0" data-days></div>
<span class="fs-sm">days</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
<div class="text-center">
<div class="h4 mb-0" data-hours></div>
<span class="fs-sm">hours</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
<div class="text-center">
<div class="h4 mb-0" data-minutes></div>
<span class="fs-sm">mins</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
<div class="text-center">
<div class="h4 mb-0" data-seconds></div>
<span class="fs-sm">secs</span>
</div>
</div>Display no years
days
:
hours
:
mins
:
secs
<!-- Countdown example without years label -->
<div class="d-flex" data-countdown-date="10/15/2025 12:00:00">
<div class="text-center">
<div class="h4 mb-0" data-days></div>
<span class="fs-sm">days</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
<div class="text-center">
<div class="h4 mb-0" data-hours></div>
<span class="fs-sm">hours</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
<div class="text-center">
<div class="h4 mb-0" data-minutes></div>
<span class="fs-sm">mins</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
<div class="text-center">
<div class="h4 mb-0" data-seconds></div>
<span class="fs-sm">secs</span>
</div>
</div>Sizing
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
<!-- Sizing -->
<!-- To adjust the size of the countdown, apply heading classes (.h1, .h2, .h3, ..., .display-1, .display-2, .display-3, ...) to the numbers and body size classes (.fs-xs, .fs-sm, .fs-lg, ...) to the labels. -->
<div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
<div class="text-center">
<div class="h1 mb-0" data-days></div>
<span class="fs-lg">days</span>
</div>
<span class="animate-blinking text-body-secondary fs-3 mx-2">:</span>
</div>
<div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
<div class="text-center">
<div class="h2 mb-0" data-days></div>
<span>days</span>
</div>
<span class="animate-blinking text-body-secondary fs-4 mx-2">:</span>
</div>
<div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
<div class="text-center">
<div class="h3 mb-0" data-days></div>
<span class="fs-sm">days</span>
</div>
<span class="animate-blinking text-body-secondary fs-4 mx-2">:</span>
</div>
<div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
<div class="text-center">
<div class="h4 mb-0" data-days></div>
<span class="fs-sm">days</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
</div>
<div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
<div class="text-center">
<div class="h5 mb-0" data-days></div>
<span class="fs-xs">days</span>
</div>
<span class="animate-blinking text-body-secondary fs-lg mx-2">:</span>
</div>
<div class="d-flex mb-2" data-countdown-date="10/15/2030 12:00:00">
<div class="text-center">
<div class="h6 mb-0" data-days></div>
<span class="fs-xs">days</span>
</div>
<span class="animate-blinking text-body-secondary mt-n1 mx-2">:</span>
</div>Colors
years
:
days
:
hours
:
mins
:
secs
<!-- Supports a predefined color palette or can be configured to use any custom color. -->
<div class="d-flex" data-countdown-date="10/15/2030 12:00:00">
<!-- Primary -->
<div class="text-center">
<div class="h4 text-primary mb-0" data-years></div>
<span class="fs-sm text-primary opacity-75">years</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
<!-- Success -->
<div class="text-center">
<div class="h4 text-success mb-0" data-days></div>
<span class="fs-sm text-success opacity-75">days</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
<!-- Warning -->
<div class="text-center">
<div class="h4 text-warning mb-0" data-hours></div>
<span class="fs-sm text-warning opacity-75">hours</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
<!-- Danger -->
<div class="text-center">
<div class="h4 text-danger mb-0" data-minutes></div>
<span class="fs-sm text-danger opacity-75">mins</span>
</div>
<span class="animate-blinking text-body-secondary fs-xl mx-2">:</span>
<!-- Info -->
<div class="text-center">
<div class="h4 text-info mb-0" data-seconds></div>
<span class="fs-sm text-info opacity-75">secs</span>
</div>
</div>Cards example
<!-- Different card styles -->
<!-- Border -->
<div class="d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
<div class="text-center mb-2">
<div class="border rounded p-2">
<div class="h3 fw-medium mb-0 mx-1" data-years></div>
</div>
<span class="fs-sm">years</span>
</div>
<span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="border rounded p-2">
<div class="h3 fw-medium mb-0 mx-1" data-days></div>
</div>
<span class="fs-sm">days</span>
</div>
<span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="border rounded p-2">
<div class="h3 fw-medium mb-0 mx-1" data-hours></div>
</div>
<span class="fs-sm">hours</span>
</div>
<span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="border rounded p-2">
<div class="h3 fw-medium mb-0 mx-1" data-minutes></div>
</div>
<span class="fs-sm">mins</span>
</div>
<span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="border rounded p-2">
<div class="h3 fw-medium mb-0 mx-1" data-seconds></div>
</div>
<span class="fs-sm">secs</span>
</div>
</div>
<!-- Body background + shadow -->
<div class="d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
<div class="text-center mb-2">
<div class="bg-body rounded shadow-sm p-2">
<div class="h3 fw-medium mb-0 mx-1" data-years></div>
</div>
<span class="fs-sm">years</span>
</div>
<span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-body rounded shadow-sm p-2">
<div class="h3 fw-medium mb-0 mx-1" data-days></div>
</div>
<span class="fs-sm">days</span>
</div>
<span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-body rounded shadow-sm p-2">
<div class="h3 fw-medium mb-0 mx-1" data-hours></div>
</div>
<span class="fs-sm">hours</span>
</div>
<span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-body rounded shadow-sm p-2">
<div class="h3 fw-medium mb-0 mx-1" data-minutes></div>
</div>
<span class="fs-sm">mins</span>
</div>
<span class="animate-blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-body rounded shadow-sm p-2">
<div class="h3 fw-medium mb-0 mx-1" data-seconds></div>
</div>
<span class="fs-sm">secs</span>
</div>
</div>
<!-- Secondary background -->
<div class="d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
<div class="text-center mb-2">
<div class="bg-body-secondary rounded p-2">
<div class="h3 fw-medium mb-0 mx-1" data-years></div>
</div>
<span class="fs-sm">years</span>
</div>
<span class="blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-body-secondary rounded p-2">
<div class="h3 fw-medium mb-0 mx-1" data-days></div>
</div>
<span class="fs-sm">days</span>
</div>
<span class="blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-body-secondary rounded p-2">
<div class="h3 fw-medium mb-0 mx-1" data-hours></div>
</div>
<span class="fs-sm">hours</span>
</div>
<span class="blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-body-secondary rounded p-2">
<div class="h3 fw-medium mb-0 mx-1" data-minutes></div>
</div>
<span class="fs-sm">mins</span>
</div>
<span class="blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-body-secondary rounded p-2">
<div class="h3 fw-medium mb-0 mx-1" data-seconds></div>
</div>
<span class="fs-sm">secs</span>
</div>
</div>
<!-- Theme subtle backgrounds + color -->
<div class="d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
<div class="text-center mb-2">
<div class="bg-warning-subtle rounded p-2">
<div class="text-warning h3 fw-medium mb-0 mx-1" data-years></div>
</div>
<span class="text-warning fs-sm">years</span>
</div>
<span class="blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-primary-subtle rounded p-2">
<div class="text-primary h3 fw-medium mb-0 mx-1" data-days></div>
</div>
<span class="text-primary fs-sm">days</span>
</div>
<span class="blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-info-subtle rounded p-2">
<div class="text-info h3 fw-medium mb-0 mx-1" data-hours></div>
</div>
<span class="text-info fs-sm">hours</span>
</div>
<span class="blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-danger-subtle rounded p-2">
<div class="text-danger h3 fw-medium mb-0 mx-1" data-minutes></div>
</div>
<span class="text-danger fs-sm">mins</span>
</div>
<span class="blinking text-body-secondary fs-2 mx-2">:</span>
<div class="text-center mb-2">
<div class="bg-success-subtle rounded p-2">
<div class="text-success h3 fw-medium mb-0 mx-1" data-seconds></div>
</div>
<span class="text-success fs-sm">secs</span>
</div>
</div>