"Bootstrap 4 Countdown Timer"
Bootstrap 4.0.0 Snippet by Sunlimetech

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<section id="timer">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 countdown-wrapper text-center mb20">
<div class="card">
<div class="card-header">
Upcomming Event countdown timer
</div>
<div class="card-block">
<div id="countdown">
<div class="well">
<span id="hour" class="timer bg-success"></span>
<span id="min" class="timer bg-info"></span>
<span id="sec" class="timer bg-primary"></span>
</div>
</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Book now</a>
<a href="#" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Subscrib for upcomming</a>
<a href="#" class="btn btn-danger">14 remaining</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 countdown-wrapper text-center mb20">
<div class="card">
<div class="card-header">
Upcomming Event countdown timer
</div>
<div class="card-block">
<div id="countdown">
<div class="well">
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
@import url(http://fonts.googleapis.com/css?family=Lato:100,400);
.mb20{
margin-bottom:20px;
}
section {
padding: 40px 0;
}
#timer .countdown-wrapper {
margin: 0 auto;
}
#timer #countdown {
font-family: 'Lato', sans-serif;
text-align: center;
color: #eee;
text-shadow: 1px 1px 5px black;
padding: 40px 0;
}
#timer .countdown-wrapper #countdown .timer {
margin: 10px;
padding: 20px;
font-size: 90px;
border-radius: 50%;
cursor: pointer;
}
#timer .col-md-4.countdown-wrapper #countdown .timer {
margin: 10px;
padding: 20px;
font-size: 35px;
border-radius: 50%;
cursor: pointer;
}
#timer .countdown-wrapper #countdown #hour {
-webkit-box-shadow: 0 0 0 5px rgba(92, 184, 92, .5);
-moz-box-shadow: 0 0 0 5px rgba(92, 184, 92, .5);
box-shadow: 0 0 0 5px rgba(92, 184, 92, .5);
}
#timer .countdown-wrapper #countdown #hour:hover {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$( document ).ready(function() {
setInterval(function time(){
var d = new Date();
var hours = 24 - d.getHours();
var min = 60 - d.getMinutes();
if((min + '').length == 1){
min = '0' + min;
}
var sec = 60 - d.getSeconds();
if((sec + '').length == 1){
sec = '0' + sec;
}
jQuery('#countdown #hour').html(hours);
jQuery('#countdown #min').html(min);
jQuery('#countdown #sec').html(sec);
}, 1000); });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2 PRO Angular
Carousel with Timer and Caption

Questions / Comments: