"Countdown Widget for BootstrapMade with (Html+Css+Js)"
Bootstrap 4.1.1 Snippet by Octagon

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="countdown align-self-center row"> <div id="timer_section" class="row"> <div align="center" class="align-self-center col-3"> <div class="countdown-days"> <span id="days_count">99</span> </div> </div> <div align="center" class="align-self-center col-3"> <div class="countdown-hrs"> <span id="hours_count">99</span> </div> </div> <div align="center" class="align-self-center col-3"> <div class="countdown-mins"> <span id="minutes_count">99</span> </div> </div> <div align="center" class="align-self-center col-3"> <div class="countdown-secs align-self-center"> <span id="seconds_count">99</span> </div> </div> </div> <div id="expiry_section" class="row align-self-center" style="display:none;"> <div class="col-sm-12"> <h4 id="expiry-text" align="center">TIME HAS ELAPSED</h4> </div> </div> </div> <div> <div class="col-sm-12"> <strong>Bootstrap Snippet Designed by Octagon</strong> </div> </div>
/* COUNDOWN CSS */ .countdown { max-width: 500px; min-width: 200px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-item-align: center; align-self: center; height: 200px; background-image: -webkit-linear-gradient(90deg, #3f5efb 0%, #fc466b 100%); border-radius: 5px; } .countdown-days { border-radius: 5px; width: auto; height: 50px; display: block; padding: 10px; background-color: #e92035; -webkit-box-shadow: 0px 0px 8px #fc466b; box-shadow: 0px 0px 8px #fc466b; color: #fff; font-size: 20px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 50%; position: relative; } .countdown-days::after { content: "Days"; font-size: 10px; } .countdown-hrs { border-radius: 5px; width: 50px; height: 50px; display: block; padding: 10px; background-color: #3f5efb; -webkit-box-shadow: 0px 0px 8px #fc466b; box-shadow: 0px 0px 8px #fc466b; color: #fff; font-size: 20px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 50%; position: relative; } .countdown-hrs:after { content: "Hours"; font-size: 10px; } .countdown-mins { border-radius: 5px; width: 50px; height: 50px; display: block; padding: 10px; background-color: #3f5efb; -webkit-box-shadow: 0px 0px 8px #fc466b; box-shadow: 0px 0px 8px #fc466b; color: #fff; font-size: 20px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 50%; position: relative; } .countdown-mins:after { content: "Minutes"; font-size: 10px; } .countdown-secs { width: 50px; height: 50px; display: block; padding: 10px; background-color: #f69300; -webkit-box-shadow: 0px 0px 8px #fc466b; box-shadow: 0px 0px 8px #fc466b; color: #fff; border-radius: 50%; font-size: 20px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 50%; position: relative; } .countdown-secs:after { content: "Seconds"; font-size: 10px; } #expiry-text { color: #fff; font-size: 25px; font-family: "Poppins", sans-serif; font-weight: 700; text-shadow: 0px 0px 5px rgb(26, 26, 26); }
$(document).ready(function() { var daysCount = document.querySelector('#days_count'); var hoursCount = document.querySelector('#hours_count'); var minsCount = document.querySelector('#minutes_count'); var secsCount = document.querySelector('#seconds_count'); var expiry = document.querySelector('#expiry_section'); var timer = document.querySelector('#timer_section'); //Set the date we're counting down to var countDownDate = new Date('2030-12-31 00:00:00').getTime(); //Update the countDown every 1 sec var x = setInterval(function() { //Get today's date and time var now = new Date().getTime(); //Find the distance between now and the count down date var distance = countDownDate - now; //Time calculations for days, hours, mins, and secs var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 *24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); //Display the result in the element daysCount.innerText = days; hoursCount.innerText = hours; minsCount.innerText = minutes; secsCount.innerText = seconds; //If countdown is finished, show some text if (distance < 0) { clearInterval(x); expiry.style.display = "block"; timer.style.display = "none"; } },1000); });

Related: See More


Questions / Comments: