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.

Edit in sandbox 
        
            
          <div data-mdb-countdown-init data-mdb-countdown="31 December 2023 23:59:59">
            <div class="countdown-unit countdown-days"></div>
            <div class="countdown-unit countdown-hours"></div>
            <div class="countdown-unit countdown-minutes"></div>
            <div class="countdown-unit countdown-seconds"></div>
          </div>

Interval

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

Edit in sandbox 
        
            
          <div data-mdb-countdown-init data-mdb-countdown="5 November 2022 12:35" data-mdb-countdown-interval="30">
            <div class="countdown-unit countdown-days"></div>
            <div class="countdown-unit countdown-hours"></div>
            <div class="countdown-unit countdown-minutes"></div>
            <div class="countdown-unit countdown-seconds"></div>
          </div>

Label

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

Edit in sandbox 
        
            
          <div data-mdb-countdown-init data-mdb-countdown="31 December 2023 23:59:59">
            <div class="countdown-unit countdown-days" data-mdb-countdown-label="days"></div>
            <div class="countdown-unit countdown-hours" data-mdb-countdown-label="hours"></div>
            <div class="countdown-unit countdown-minutes" data-mdb-countdown-label="minutes"></div>
            <div class="countdown-unit countdown-seconds" data-mdb-countdown-label="seconds"></div>
          </div>

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.

Edit in sandbox 
        
            
          <div data-mdb-countdown-init data-mdb-countdown="31 December 2023 23:59:59" data-mdb-countdown-separator=":">
            <div class="countdown-unit countdown-days"></div>
            <div class="countdown-unit countdown-hours"></div>
            <div class="countdown-unit countdown-minutes"></div>
            <div class="countdown-unit countdown-seconds"></div>
          </div>

Styling

Countdown position

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

Edit in sandbox 
        
            
            <div data-mdb-countdown-init data-mdb-countdown="31 December 2023 23:59:59" data-mdb-countdown-position="vertical">
              <div class="countdown-unit countdown-days"></div>
              <div class="countdown-unit countdown-hours"></div>
              <div class="countdown-unit countdown-minutes"></div>
              <div class="countdown-unit countdown-seconds"></div>
            </div>

Label position

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

Edit in sandbox 
        
            
            <div data-mdb-countdown-init data-mdb-countdown="31 December 2023 23:59:59" data-mdb-countdown-label-position="horizontal">
              <div class="countdown-unit countdown-days" data-mdb-countdown-label="d"></div>
              <div class="countdown-unit countdown-hours" data-mdb-countdown-label="h"></div>
              <div class="countdown-unit countdown-minutes" data-mdb-countdown-label="m"></div>
              <div class="countdown-unit countdown-seconds" data-mdb-countdown-label="s"></div>
            </div>

Text size

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

Edit in sandbox 
        
            
            <div data-mdb-countdown-init data-mdb-countdown="31 December 2023 23:59:59" data-mdb-countdown-text-size="6rem">
              <div class="countdown-unit countdown-days" data-mdb-countdown-label="days"></div>
              <div class="countdown-unit countdown-hours" data-mdb-countdown-label="hours"></div>
              <div class="countdown-unit countdown-minutes" data-mdb-countdown-label="minutes"></div>
              <div class="countdown-unit countdown-seconds" data-mdb-countdown-label="seconds"></div>
            </div>

Custom classes

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

Edit in sandbox 
        
            
            <div
              data-mdb-countdown="31 December 2023 23:59:59"
              data-mdb-countdown-text-style="badge bg-primary"
              data-mdb-countdown-label-style="text-light bg-dark"
              data-mdb-countdown-init
            >
              <div class="countdown-unit countdown-days" data-mdb-countdown-label="days"></div>
              <div class="countdown-unit countdown-hours" data-mdb-countdown-label="hours"></div>
              <div class="countdown-unit countdown-minutes" data-mdb-countdown-label="minutes"></div>
              <div class="countdown-unit countdown-seconds" data-mdb-countdown-label="seconds"></div>
            </div>

Countdown - API

Import

Edit in sandbox 
        
            
          import Countdown from 'mdb-countdown';
        
        
    
        
            
          @import '~mdb-countdown/css/countdown.min.css';

Usage

Create default Countdown by adding data-mdb-countdown to a container element with a Countdown expiration date value. Date value should be passed using proper Date format.

Via data attributes

Using the Countdown plugin doesn't require any additional JavaScript code - simply add data-mdb-countdown-init attribute to container element with a Countdown expiration date value and use other data attributes to set all options.

Edit in sandbox 
        
            
        <div data-mdb-countdown-init data-mdb-countdown="31 December 2023 23:59:59">
          <div class="countdown-unit countdown-days"></div>
          <div class="countdown-unit countdown-hours"></div>
          <div class="countdown-unit countdown-minutes"></div>
          <div class="countdown-unit countdown-seconds"></div>
        </div>

Via JavaScript

Edit in sandbox 
        
            
        <div id="countdown-element">
          <div class="countdown-unit countdown-days"></div>
          <div class="countdown-unit countdown-hours"></div>
          <div class="countdown-unit countdown-minutes"></div>
          <div class="countdown-unit countdown-seconds"></div>
        </div>
      
        
    
        
            
        const countdownExample = document.getElementById('countdown-element');
        new Countdown(countdownExample, {
          countdown: "31 December 2021 23:59:59",
        })

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
        
            
        <div id="countdown-element">
          <div class="countdown-unit countdown-days"></div>
          <div class="countdown-unit countdown-hours"></div>
          <div class="countdown-unit countdown-minutes"></div>
          <div class="countdown-unit countdown-seconds"></div>
        </div>
      
        
    
        
            
        $(document).ready(() => { 
          $('#countdown-element').countdown();
        });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-countdown="".

Name Type Default Description
countdown String '' Initiates Countdown instance on element. Takes the value of the date to which the timer will be counting.
'unit' Attached to children element defines time unit to be displayed on element. Possible values: data-mdb-"days | hours | minutes | seconds".
'countdownInterval' Number 0 Sets interval in seconds that will reset timer after given amount of time after initial countdown ends.
countdownLabel String '' Attached to children element defines time unit label to be displayed on element.
countdownSeparator String '' Attached to container element defines separator used between each time unit value. Separator is not visible in vertical position of the Countdown element.
countdownPosition String 'horizontal' Positions Countdown element horizontally or vertically.
countdownLabelPosition String 'vertical' Positions the label at the bottom or next to the corresponding time unit value.
countdownTextStyle String '' Adds custom styles to all time unit text elements.
countdownLabelStyle String '' Adds custom styles to all labels.
countdownTextSize String '' Sets size of time unit text element. Text for labels in vertical label position is four times smaller than time unit text.

Methods

Name Parameters Description Example
stop Stops the timer. instance.stop()
start Starts stopped timer. instance.start()
setCountdownDate date Dynamically sets new date to count to instance.setCountdownDate('31 December 2021 23:59:59')
dispose Disposes a Countdown instance. instance.dispose()
getInstance element Static method which allows to get the countdown instance associated with a DOM element. Countdown.getInstance(couontdownElement)
Edit in sandbox 
        
            
        const countdownElement = document.getElementById('countdown-element');
        const instance = Countdown.getInstance(countdownElement);
        instance.stop();
        instance.start();

Events

Name Description
start.mdb.countdown This event fires immediately when the countdown starts counting.
end.mdb.countdown This event fires immediately when the countdown timer stops counting.
Edit in sandbox 
        
            
          document.addEventListener('start.mdb.countdown', (e)=> {
            // do something...
          })