<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>
<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">