"Bootstrap 4 Countdown Timer"
Bootstrap 4.0.0 Snippet by abhijeetka

<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"> <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> </section> </div> <!-- Subscribe for upcomming event modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Subscribe for our upcomming Events</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="email">Email address</label> <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-success">Save changes</button> </div> </div> </div> </div> <!-- /Subscribe for upcomming event modal -->
@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 {width:170px;display:inline-block;} #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; display:inline-block; width:150px; } #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 { -webkit-box-shadow: 0px 0px 15px 1px rgba(92, 184, 92, 1); -moz-box-shadow: 0px 0px 15px 1px rgba(92, 184, 92, 1); box-shadow: 0px 0px 15px 1px rgba(92, 184, 92, 1); } #timer .countdown-wrapper #countdown #min { -webkit-box-shadow: 0 0 0 5px rgba(91, 192, 222, .5); -moz-box-shadow: 0 0 0 5px rgba(91, 192, 222, .5); box-shadow: 0 0 0 5px rgba(91, 192, 222, .5); } #timer .countdown-wrapper #countdown #min:hover { -webkit-box-shadow: 0px 0px 15px 1px rgb(91, 192, 222); -moz-box-shadow: 0px 0px 15px 1px rgb(91, 192, 222); box-shadow: 0px 0px 15px 1px rgb(91, 192, 222); } #timer .countdown-wrapper #countdown #sec { -webkit-box-shadow: 0 0 0 5px rgba(2, 117, 216, .5); -moz-box-shadow: 0 0 0 5px rgba(2, 117, 216, .5); box-shadow: 0 0 0 5px rgba(2, 117, 216, .5) } #timer .countdown-wrapper #countdown #sec:hover { -webkit-box-shadow: 0px 0px 15px 1px rgba(2, 117, 216, 1); -moz-box-shadow: 0px 0px 15px 1px rgba(2, 117, 216, 1); box-shadow: 0px 0px 15px 1px rgba(2, 117, 216, 1); } #timer .countdown-wrapper .card .card-footer .btn { margin: 2px 0; } @media (min-width: 992px) and (max-width: 1199px) { #timer .countdown-wrapper #countdown .timer { margin: 10px; padding: 20px; font-size: 65px; border-radius: 50%; cursor: pointer; } } @media (min-width: 768px) and (max-width: 991px) { #timer .countdown-wrapper #countdown .timer { margin: 10px; padding: 20px; font-size: 72px; border-radius: 50%; cursor: pointer; } } @media (max-width: 768px) { #timer .countdown-wrapper #countdown .timer { margin: 10px; padding: 20px; font-size: 73px; border-radius: 50%; cursor: pointer; } } @media (max-width: 767px) { #timer .countdown-wrapper #countdown #hour, #timer .countdown-wrapper #countdown #min, #timer .countdown-wrapper #countdown #sec { font-size: 60px; border-radius: 4%; } } @media (max-width: 576px){ #timer .countdown-wrapper #countdown #hour, #timer .countdown-wrapper #countdown #min, #timer .countdown-wrapper #countdown #sec { font-size: 25px; border-radius: 4%; } #timer .countdown-wrapper #countdown .timer { padding: 13px; } }
$( 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); });

Related: See More


Questions / Comments: