BootKit home · Manual home

POINTERS

Triangular shapes which can be used as horizontal or vertical pointers aimed at another cell or panel body.
Default pointer height and width are 12 pixels but this can easily be changed with 2 LESS variables.


Available classes

USING INLINE-BLOCK

Examples

col-xs-4
col-xs-4
col-xs-4
<div class="panel-body bk-ltr text-center">
    <div class="row bk-fg-white bk-bg-danger">
        <div class="col-xs-4 bk-vcenter bk-pd-15 bk-bg-primary bk-pt bk-pt-r-primary">
            col-xs-4
        </div>
        <div class="col-xs-4 bk-vcenter bk-bg-warning bk-pd-15 bk-pt bk-pt-r-warning">
            col-xs-4
        </div>
        <div class="col-xs-4 bk-vcenter bk-pd-15">
            col-xs-4
        </div>
    </div>
</div>
col-xs-4
col-xs-4
col-xs-4
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-ltr text-center">
        <div class="row bk-fg-white bk-bg-success">
            <div class="col-xs-4 bk-vcenter bk-pd-15 bk-bg-info">
                col-xs-4
            </div>
            <div class="col-xs-4 bk-vcenter bk-bg-gray bk-pd-15 bk-pt bk-pt-l-gray">
                col-xs-4
            </div>
            <div class="col-xs-4 bk-vcenter bk-pd-15 bk-pt bk-pt-l-success">
                col-xs-4
            </div>
        </div>
    </div>
</div>

USING TABLES

(use these if you need content with unequal height)

left content
right content
left content
centered content
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-ltr bk-fg-white bk-rd">
        <div class="row bk-tbl text-center">
            <div class="col-xs-6 bk-bg-info bk-bg-lighten bk-pd-15 bk-bottom bk-pt bk-pt-r-info">
                left content
            </div>
            <div class="col-xs-6 bk-bg-danger bk-bg-lighten bk-fg-white bk-rd-r">
                right content
            </div>
        </div>
    </div>
</div>

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-ltr bk-fg-white">
        <div class="row bk-tbl text-center">
            <div class="col-xs-6 bk-bg-info bk-bg-lighten bk-pd-15 bk-bottom">
                left content
            </div>
            <div class="col-xs-6 bk-bg-danger bk-bg-lighten bk-fg-white bk-pt bk-pt-l-danger bk-rd-r">
                centered content
            </div>
        </div>
    </div>
</div>

STACKED PANEL BODIES

bk-overflow is used to make sure overflow is not hidden. This implies we need to add bk-rd-t and bk-rd-b to top and bottom panel bodies to "repair" the border radius when needed.

primary
panel body
success
panel body
info
panel body
primary
panel body
success
panel body
info
panel body
<div class="panel bk-widget bk-bd-off bk-fg-white bk-overflow">
    <div class="panel-body text-center bk-bg-primary bk-pt bk-pt-b-primary bk-rd-t">
        primary<br>panel body
    </div>
    <div class="panel-body text-center bk-bg-success bk-pt bk-pt-b-success bk-pd-t-20">
        success<br>panel body
    </div>
    <div class="panel-body text-center bk-bg-danger bk-pt bk-pt-b-danger bk-pd-t-20 bk-rd-b">
        info<br>panel body
    </div>
</div>

<div class="panel bk-widget bk-bd-off bk-fg-white bk-overflow">
    <div class="panel-body text-center bk-bg-primary bk-pt bk-pt-t-primary bk-pd-b-20 bk-rd-t">
        primary<br>panel body
    </div>
    <div class="panel-body text-center bk-bg-success bk-pt bk-pt-t-success bk-pd-b-20">
        success<br>panel body
    </div>
    <div class="panel-body text-center bk-bg-danger bk-pt bk-pt-t-danger bk-rd-b">
        info<br>panel body
    </div>
</div>