Create a Countdown using Bootstrap 5 Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report The countdown timer displays the remaining time from a set future date, showing days, hours, minutes, and seconds until the specified event or deadline. In this article, we will create a countdown timer using Bootstrap. Preview Prerequisites HTMLCSSJavaScriptBootstrapApproachThe provided HTML, CSS, and JavaScript create a countdown timer. Initially hidden, the timer box contains an input field for setting the countdown date and a button. Upon button click, the timer box becomes visible, triggering JavaScript to start a timer. The timer calculates the difference between the set date and the current time, updating the displayed countdown every second. When the countdown reaches zero, it displays an "EXPIRED" message. The code utilizes Bootstrap for styling and ensures a user-friendly countdown timer experience. Example: This example shows the implementation of the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Countdown Timer</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .countdown { display: none; /* Initially hide */ justify-content: center; align-items: center; font-size: 3rem; } .container { padding-top: 50px; } .timer-box { border: 1px solid #ccc; border-radius: 10px; padding: 20px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <h1 class="text-center mb-4">Countdown Timer</h1> </div> </div> <div class="row"> <div class="col-md-6 offset-md-3"> <div class="timer-box"> <div class="form-group"> <label for="countdownDate">Set Countdown Date and Time:</label> <input type="datetime-local" class="form-control" id="countdownDate"> </div> <button class="btn btn-primary mt-2 w-100" onclick="startCountdown()"> Start Countdown </button> <div class="countdown mt-4" id="countdown"> <span id="days">00</span> : <span id="hours">00</span> : <span id="minutes">00</span> : <span id="seconds">00</span> </div> </div> </div> </div> </div> <script> let countdownDate; function startCountdown() { // Get the date and time set by the user countdownDate = new Date(document.getElementById("countdownDate") .value).getTime(); // Show the countdown clock document.getElementById("countdown").style.display = "flex"; // Update the countdown every 1 second let x = setInterval(function() { // Get the current date and time let now = new Date().getTime(); // Calculate the distance between now and the countdown date let distance = countdownDate - now; // Calculate days, hours, minutes and seconds let days = Math.floor(distance / (1000 * 60 * 60 * 24)); let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); let seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result document.getElementById("days").innerHTML = days. toString().padStart(2, '0'); document.getElementById("hours").innerHTML = hours. toString().padStart(2, '0'); document.getElementById("minutes").innerHTML = minutes. toString().padStart(2, '0'); document.getElementById("seconds").innerHTML = seconds. toString().padStart(2, '0'); // If the countdown is over, display a message if (distance < 0) { clearInterval(x); document.getElementById("countdown").innerHTML = "EXPIRED"; } }, 1000); } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create Coming Soon Page with Countdown in Bootstrap ? G geekcoder2298 Follow Improve Article Tags : Project Web Technologies Bootstrap Dev Scripter Bootstrap-5 Dev Scripter 2024 +2 More Similar Reads Bootstrap 5 Columns Wrapping Columns are an integral part of the grid system. The columns are placed inside the row that is wrapped by a container. If more than 12 columns are placed within a single row, they will wrap to the next line automatically as one unit. Bootstrap 5 Columns wrapping Classes: There is no specific class t 2 min read How to create a progress bar using bootstrap ? Bootstrap is an open-source framework used to design responsive websites which are easy and efficient to use. It has ready-made templates which can be used to design web pages in a limited time.What is a progress bar?A progress bar is used whenever there is a need for a visual interface to show prog 4 min read Bootstrap 5 Toasts Options Bootstrap 5 Toasts Options available a few features like enable/disable, auto-hide, etc. A toast is used to create something like an alert box that is only shown for a couple of seconds when something happens. When the user clicks on a button, submits a form, etc. then a lightweight and easily custo 2 min read How to create Coming Soon Page with Countdown in Bootstrap ? A Coming Soon countdown landing page is a great way to build anticipation for your website or startup. It not only keeps visitors up to date with upcoming releases but also adds excitement. Thanks to Bootstrap’s responsive design and components, the Coming Soon is seamless, ensuring your audience ge 4 min read How to create a stacked progress bar using Bootstrap 5 ? In this article, we will know how to create the stacked progress bar with the label on it using Bootstrap. Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. A Progress bar is used to display the progress of a process on a computer. A pr 3 min read Google AMP amp-date-countdown The amp-data-countdown is used to count down to a specific date which is rendered to the AMP HTML page. It is specifically used as a timer or count-down. Required Scripts: Adding the amp-data-countdown component. HTML <script async custom-element="amp-date-countdown" src= "https://cdn.ampproject. 5 min read Like