<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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script> <h1>Flipclock Timer Customization</h1> <div class="clock2" style="margin:2em;"></div> <div class="message"></div>

.flip-clock-wrapper ul.flip.flip{ border-radius: 6px !important; } .flip-clock-wrapper ul.flip li a div div.inn{ background-color: #794a02 !important; border-radius: 6px !important; }

var clock; $(document).ready(function() { var clock; clock = $('.clock').FlipClock({ clockFace: 'HourlyCounter', autoStart: false, callbacks: { stop: function() { $('.message').html('The clock has stopped!') } } }); clock.setTime(180); clock.setCountdown(true); clock.start(); var clock2; clock2 = $('.clock2').FlipClock({ clockFace: 'HourlyCounter', autoStart: false, callbacks: { stop: function() { $('.message').html('The clock has stopped!') } } }); clock2.setTime(180); clock2.setCountdown(true); clock2.start(); $( "span.flip-clock-divider" ).remove(); });