BootKit home · Manual home

BACKGROUNDS

Add color to backgrounds by adding classes to panel-body or individual cells.


Available classes

Default colors - hover effects apply

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

Lighter version

bk-bg-primary-lighter
bk-bg-success-lighter
bk-bg-info-lighter
bk-bg-warning-lighter
bk-bg-danger-lighter
bk-bg-inverse-lighter
bk-bg-gray-lighter
bk-bg-light-gray-lighter
bk-bg-very-light-gray-lighter

Darker version

bk-bg-primary-darker
bk-bg-success-darker
bk-bg-info-darker
bk-bg-warning-darker
bk-bg-danger-darker
bk-bg-inverse-darker
bk-bg-gray-darker
bk-bg-light-gray-darker
bk-bg-very-light-gray-darker
bk-bg-white-darker

Example

Uses bk-bg-success for background and bk-fg-white as foreground color.

DISK SPACE
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-success bk-fg-white 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-bg-darken and bk-bg-lighten widgets can receive background color effects.

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-bg-primary bk-bg-darken bk-fg-white 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-warning bk-bg-lighten bk-fg-white 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 background 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 that becomes lighter and the child element becomes darker.

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

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