Card Clock Bootstrap 4 bootdey

This bootstrap snippet called "Card Clock Bootstrap 4 bootdey" 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

This is the HTML code for this bootstrap snippet

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

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

This is the CSS code for this bootstrap snippet

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

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';}
                                    

This is the JS code for this bootstrap snippet

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

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

Information about this bootstrap snippet

Creator: Mihail Merenkov

Bootstrap version: 4.0.0-beta

Created: Nov 21st 2017, 04:16

Views: 122