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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit
Collapsible Chat Widget
Chat Widget
User Profile Widget

Questions / Comments: