BootKit home · Manual home

FOREGROUND

Text color can be configured in many ways without much effort. Override the default text and link colors by adding simple classes.


Available classes

bk-fg-primary
bk-fg-success
bk-fg-info
bk-fg-warning
bk-fg-danger
bk-fg-inverse
bk-fg-textcolor
bk-fg-gray
bk-fg-light-gray
bk-fg-very-light-gray
bk-fg-white

Example

Uses bk-fg-success as text color.

DISK SPACE
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white bk-fg-success text-center">
        <h5 class="bk-mg-off">DISK SPACE</h5>
        <i class="fa fa-database fa-2x bk-pd-t-10"></i>
    </div>
</div>

Hover effects

By applying bk-fg-darken and bk-fg-lighten widgets can receive text color effects.

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-bg-white bk-fg-primary bk-fg-darken text-center">
        <h5 class="bk-mg-off">MEMORY</h5>
        <i class="fa fa-cube fa-2x bk-pd-t-10"></i>
    </a>
</div>

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-bg-white bk-fg-warning bk-fg-lighten text-center">
        <h5 class="bk-mg-off">BANDWIDTH</h5>
        <i class="fa fa-bar-chart-o fa-2x bk-pd-t-10"></i>
    </a>
</div>

Redefining child element foreground colors

We can add the above classes to any child of a panel-body acting as a link and the same functionality will be available.
The example below on the left does not have a hover effect on the panel-body but has one on the child element styled with the primary color.
The example on the right has a panel-body which has text that lightens up and the child element text becomes darker.

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-bg-white bk-fg-info text-center">
        <h5 class="bk-mg-off">TASKS</h5>
        <i class="fa fa-tasks fa-2x bk-pd-t-10"></i>
        <div class="bk-fg-primary bk-fg-darken bk-mg-t-10 bk-pd-10 bk-700">
            primary color
        </div>
    </a>
</div>

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-bg-white bk-fg-success bk-fg-lighten text-center">
        <h5 class="bk-mg-off">UPDATES</h5>
        <i class="fa fa-refresh fa-2x bk-pd-t-10"></i>
        <div class="bk-fg-danger bk-fg-darken bk-mg-t-10 bk-pd-10 bk-700">
            danger color
        </div>
    </a>
</div>