BootKit home · Manual home

BORDERS

By default a Bootstrap panel has a border color but we usually want to change this to make our widgets look better.


Available classes

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

For a panel-body with rounded corners we use bk-rd (radius) as we need to redefine the radius on panel child elements when using this technique.

Rounded corners can be defined for top, left, right and bottom.

Example

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

Border width

We can determine the thickness of the border by adding an extra class.

When you want to achieve a visually improved inner border radius, check out this article. It suggests working with a bigger radius on the containing element (.panel) to make the inner radius look better.

Example

bk-bd-2x

DISK SPACE

bk-bd-3x

DISK SPACE

bk-bd-3x

DISK SPACE

bk-bd-3x

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

Turning off the border

Can be achieved by adding the class bk-bd-off. This is generally used on panels to remove the default border in bootstrap but can be used anywhere.

DISK SPACE
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white bk-rd bk-fg-primary 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

As with backgrounds, panel bodies with borders can receive an extra class to make them lighter or darker on hover.

Lighten

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:"  class="panel-body bk-bg-white bk-bd-primary bk-bd-5x bk-bd-darken bk-rd bk-fg-primary text-center">
        <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">
    <a href="javascript:"  class="panel-body bk-bg-white bk-bd-primary bk-bd-5x bk-bd-lighten bk-rd bk-fg-primary text-center">
        <h5 class="bk-mg-off">DISK SPACE</h5>
        <i class="fa fa-database fa-2x bk-pd-t-10"></i>
    </a>
</div>

Redefining child element border colors

Child elements can havean overriding style when links are involved.

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 border that becomes lighter and the child element border becomes darker.

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-bg-white bk-bd-info bk-bd-3x bk-fg-info bk-rd text-center">
        <h5 class="bk-mg-off">TASKS</h5>
        <i class="fa fa-tasks fa-2x bk-pd-t-10"></i>
        <div class="bk-bd-primary bk-bd-darken bk-bd-5x bk-fg-primary 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-white bk-bd-success bk-bd-lighten bk-bd-3x bk-fg-success bk-rd text-center">
        <h5 class="bk-mg-off">UPDATES</h5>
        <i class="fa fa-refresh fa-2x bk-pd-t-10"></i>
        <div class="bk-bd-danger bk-bd-darken bk-bd-5x bk-fg-danger bk-mg-t-10 bk-pd-10">
            danger color
        </div>
    </a>
</div>