Search code examples
cssflipclock

Center Flipclock and change text to white

I have Flipclock working fine on my website, but I need to change the "days: Hourrs: Minutes:" text to white, but can't find what css to add/amend

also (I'm using bootstrap3) I can;t get the Flipclock to center in a div. I currently have the following code:

<div class="col-md-12 text-center">
<div class="clock center-block" style="margin:2em;" align="center"></div>

But the clock stubbornly stays to the left.

Thanks for any advice

Solution

  • Change header text to white (edited):

    .flip-clock-wrapper .flip-clock-divider .flip-clock-label {
    color: #FFF;
}

    Class .center-block from Bootstrap applies margin: 0 auto; and you're overwriting that with style="margin:2em;". Remove that style and the clock should center appropriately. You may need to set an explicit width on the clock. FlipClock's website uses a default of 460px:

    .flip-clock-wrapper .clock {
    width: 460px;
    height: 116px;
    margin: 0 auto;
}