Countdown

Bootstrap 5 Countdown plugin

Countdown plugin built with the Bootstrap 5. Examples of timers, counters, stopwatch, number counts, counter box & more.

Note: Read the API tab to find all available options and advanced customization

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Basic example

Create default Countdown by adding the data-mdb-countdown-init attribute to a container element and and specifying the expiration date with data-mdb-countdown attribute. Additionally, add the .countdown-unit class and .countdown-* with the respective time unit to a child element, indicating which time units should be displayed inside the Countdown.

Show code

Interval

Create an interval that resets the timer every time the initial countdown ends.

Show code

Label

Create a label for each time unit by adding data-mdb-countdown-label with text of your choice.

Show code

Separator

Add data-mdb-countdown-separator to a container element to insert separator between each time unit.

Separator won't be visible for Countdown column position.

Show code

Styling

Countdown position

Change default horizontal position of Countdown with data-mdb-countdown-position="vertical"

Show code

Label position

Change default vertical position of Countdown label with data-mdb-countdown-label-position="horizontal"

Show code

Text size

Change default time unit text size (4rem) with data-mdb-countdown-text-size.

Show code

Custom classes

Add custom classes to time unit value and label with data-mdb-countdown-text-style and data-mdb-countdown-label-style

Show code