Card Clock Bootstrap 4 bootdey

Bootstrap snippet. Card Clock Bootstrap 4 bootdey, this snippet was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<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

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{
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

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview selection

$(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);
}); 

Similar snippets

Bootstrap snippet bs4 Accordion form Wizard

bs4 Accordion form Wizard

View

Bootstrap snippet bs4 profile detail page

bs4 profile detail page

View

Bootstrap snippet bs4 social profile

bs4 social profile

View

About this snippet

Creator: Mihail Merenkov

Bootstrap version: 4.0.0-beta

Created: Nov 21st 2017, 04:16

Views: 254