BootKit home · Manual home

OPACITY

A very handy way to make colors appear lighter or darker or to have opacity hover effects.


Available classes

Example: widget

We need to fix some Chrome on Window annoyances: use bk-chrome-fix whenever the hover effect breaks rounded corners, image moving bugs appear or unwanted element movements are detected.

bk-opacity

bk-opacity-inv

bk-opacity-5 (without link)

DISK SPACE

Beware that everything inside the widget is affected: text, background and border.

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

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

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

Example: hr






<hr class="bk-hr-primary bk-opacity-2">
<hr class="bk-hr-primary bk-opacity-4">
<hr class="bk-hr-primary bk-opacity-5">
<hr class="bk-hr-primary bk-opacity-6">
<hr class="bk-hr-primary bk-opacity-8">

Example: image

bk-opacity

bk-opacity-inv

<div class="panel bk-widget bk-bd-off bk-chrome-fix">
    <a class="panel-body bk-pd-off bk-opacity">
        <img src="img/flat-sun.jpg" alt="" class="img-responsive bk-rd-t">
    </a>
</div>

<div class="panel bk-widget bk-bd-off bk-chrome-fix">
    <a class="panel-body bk-pd-off bk-opacity-inv">
        <img src="img/flat-sun.jpg" alt="" class="img-responsive bk-rd-t">
    </a>
</div>

Opacity overlay

Use bk-opacity-light or bk-opacity-dark to make sections of a widget darker or lighter.

<div class="panel bk-widget bk-bd-off bk-fg-white bk-rd-off">
    <a href="javascript:" class="panel-body bk-bg-primary bk-bg-darken bk-fg-white bk-ltr">
        <div class="row bk-pd-15">
            <div class="col-xs-8 bk-pd-off bk-vcenter">
                <h2 class="bk-mg-off bk-700">4,566</h2>
            </div>
            <div class="col-xs-4 bk-pd-off bk-vcenter text-right">
                <i class="fa fa-users fa-2x"></i>
            </div>
        </div>
        <div class="bk-opacity-dark bk-sml bk-pd-t-5 bk-pd-b-5 bk-pd-l-15 bk-pd-r-15">
            VISITS TODAY
        </div>
    </a>
</div>

<div class="panel bk-widget bk-bd-off bk-fg-white bk-rd-off">
    <a href="javascript:" class="panel-body bk-bg-primary bk-bg-darken bk-fg-white bk-ltr">
        <div class="row bk-pd-15">
            <div class="col-xs-8 bk-pd-off bk-vcenter">
                <h2 class="bk-mg-off bk-700">4,566</h2>
            </div>
            <div class="col-xs-4 bk-pd-off bk-vcenter text-right">
                <i class="fa fa-users fa-2x"></i>
            </div>
        </div>
        <div class="bk-opacity-light bk-sml bk-pd-t-5 bk-pd-b-5 bk-pd-l-15 bk-pd-r-15">
            VISITS TODAY
        </div>
    </a>
</div>