HTML code
Clean, semantic HTML that powers this Bootstrap 4.0.0-beta snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.
Download<div class="container mb-3"><h1 class="text-center mb-4 mt-3">Card Clock Bootstrap 4</h1>
<p class="lead text-center">Original design Card hours from <a href="http://bootstraptema.ru/stuff/snippets_bootstrap/clock/card_clock_bootstrap_4/31-1-0-2478" target="_blank">BootstrapTema</a></p>
<p class="lead text-center">You can use all basic classes of colors, change background color, change text color and border color hours</p>
<h2 class="text-center col-xl-12">Flexbox Clock Bootstrap 4 Card</h2><hr />
<!-- flexbox clock row --><div class="row">
<div class="col-md-3">
<div class="card bg-dark text-white">
<h3 class="card-title text-center">
<div class="d-flex flex-wrap justify-content-center mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</div>
</h3>
</div>
</div>
<div class="col-md-3">
<div class="card bg-primary text-white">
<h3 class="card-title text-center">
<div class="d-flex flex-wrap justify-content-center mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</div>
</h3>
</div>
</div>
<div class="col-md-3">
<div class="card bg-secondary text-white">
<h3 class="card-title text-center">
<div class="d-flex flex-wrap justify-content-center mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</div>
</h3>
</div>
</div>
<div class="col-md-3">
<div class="card bg-success text-white">
<h3 class="card-title text-center">
<div class="d-flex flex-wrap justify-content-center mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</div>
</h3>
</div>
</div>
<div class="col-md-3">
<div class="card bg-danger text-white">
<h3 class="card-title text-center">
<div class="d-flex flex-wrap justify-content-center mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</div>
</h3>
</div>
</div>
<div class="col-md-3">
<div class="card bg-warning text-white">
<h3 class="card-title text-center">
<div class="d-flex flex-wrap justify-content-center mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</div>
</h3>
</div>
</div>
<div class="col-md-3">
<div class="card bg-info text-white">
<h3 class="card-title text-center">
<div class="d-flex flex-wrap justify-content-center mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</div>
</h3>
</div>
</div>
<div class="col-md-3">
<div class="card bg-light">
<h3 class="card-title text-center">
<div class="d-flex flex-wrap justify-content-center mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</div>
</h3>
</div>
</div>
</div><!-- /.flexbox clock row -->
<h2 class="text-center col-xl-12 mt-4">Card Clock Bootstrap 4</h2><hr />
<!-- clock row --><div class="row">
<div class="col-md-3">
<div class="card text-white">
<div class="card-body bg-dark text-center">
<p class="card-title mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white">
<div class="card-body bg-primary text-center">
<p class="card-title mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white">
<div class="card-body bg-secondary text-center">
<p class="card-title mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white">
<div class="card-body bg-success text-center">
<p class="card-title mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white">
<div class="card-body bg-danger text-center">
<p class="card-title mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white">
<div class="card-body bg-warning text-center">
<p class="card-title mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white">
<div class="card-body bg-info text-center">
<p class="card-title mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-light">
<div class="card-body bg-light text-center">
<p class="card-title mt-2">
<a><span class="badge hours"></span></a> :
<a><span class="badge min"></span></a> :
<a><span class="badge sec"></span></a>
</p>
</div>
</div>
</div>
</div><!-- /.clock row -->
</div><!-- /.container -->CSS code
Scoped CSS that styles the component. Paste it after Bootstrap 4.0.0-beta to keep the design, spacing, and responsiveness consistent.
Downloadbody{
background: #C9D6FF;
background: -webkit-linear-gradient(to right, #E2E2E2, #C9D6FF);
background: linear-gradient(to right, #E2E2E2, #C9D6FF);
}
@font-face { /* download clock font: http://bootstraptema.ru/stuff/0-0-0-2478-20 */
font-family:"alarm clock";
src:url("/fonts/a/alarm_clock.eot?") format("eot"),
url("/fonts/a/alarm_clock.woff") format("woff"),
url("/fonts/a/alarm_clock.ttf") format("truetype"),
url("/fonts/a/alarm_clock.svg#alarmclock") format("svg");
font-weight:normal;
font-style:normal;
}
h3,a{font-family: 'alarm clock';}Javascript/Jquery code
Lightweight JS to power any interactions this snippet needs. Drop it under your scripts (after Bootstrap 4.0.0-beta) to mirror the live demo.
Download$(document).ready(function() {
setInterval( function() {
var hours = new Date().getHours();
$(".hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);
setInterval( function() {
var minutes = new Date().getMinutes();
$(".min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
setInterval( function() {
var seconds = new Date().getSeconds();
$(".sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);
}); 
FAQ
How do I use this snippet?
Include Bootstrap 4.0.0-beta, paste the HTML, add the CSS block, and include the JS (if any) to mirror the live preview.
Can I use it in commercial projects?
Yes. It’s free for personal and commercial work; check the snippets license for details.
Is it responsive?
Yes. It inherits the responsive grid and components from Bootstrap 4.0.0-beta.
About this bootstrap example/template
This free Bootstrap 4.0.0-beta snippet, Card Clock Bootstrap 4 bootdey, was published on Nov 21st 2017, 04:16 by Mihail Merenkov.
Optimized for copy‑paste: clean HTML, scoped CSS, and minimal JS so you can ship production‑ready UI faster and keep designs consistent.
Mobile‑first and responsive by default. Tested across modern browsers to reduce polish time on your project.
Already trusted in 1.7K+ views. Reuse this snippet to speed up landing pages, dashboards, or onboarding flows.
Bootstrap 4.0.0-beta
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<script src='https://netdna.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
This code example is based on bootstrap 4.0.0-beta and the grid system of this framework
Responsive
Based on bootstrap framework makes all the layouts perfectly responsive for all devices
Crossbrowser compatibility
Tested on all major browsers, it works smoothly on all of them
Jquery plugins
Great built-in plugins with jquery framework, you can easy to change all declarations
semantic html 5
Built on html / css3 the code quality is really amazing
Simple Integration
This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working