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

Basic example

Create default Countdown with MDBCountdown and MDBCountdownUnit components. MDBCountdown uses slot properties to expose units value to its children elements.

Show code

Interval

Create interval that will reset timer every time initial countdown ends.

Show code

Label

Create label for each time unit by adding label with a text of your choice.

Show code

Separator

Add separator to a container element to insert separator between each time unit.

Separator won't be visible for Countdown vertical position

Show code

Styling

Countdown position

Change default horizontal position of Countdown with vertical property

Show code

Label position

Change default vertical position of Countdown label with labelPosition="horizontal"

Show code

Text size

Change default time unit text size (4rem) with textSize.

Show code

Custom classes

Add custom classes to time unit value and label with textStyle and labelStyle

Show code

Slot props

With slot properties you can use our Countdown whatever you want. Add custom property to disable default styling.

Show code