BootKit home · Manual home

DIVIDERS

Draw horizontal and vertical lines between widget cells.
Many varieties can be achieved by combining HTML hr elements with cells that have a right border color and by adding the proper spacing (padding and margins) when needed.


Available classes

The examples below use bk-bd-light-gray-right on the cells to create a vertical line that acts as a divider.

USING INLINE-BLOCK

As explained in the alignment section we need to have content of euqal height or add a fixed height to the wrapper row when using row/column structures with inline-block.

Examples

Padding is on the panel-body

No extra class is needed to obtain the default 15 pixel padding on the panel-body.

1
col-xs-3
2
col-xs-3
3
col-xs-3
4
col-xs-3
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center">
        <div class="row">
            <div class="col-xs-3 bk-bd-light-gray-right">
                1<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right">
                2<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right">
                3<br>
                col-xs-3
            </div>
            <div class="col-xs-3">
                4<br>
                col-xs-3
            </div>
        </div>
    </div>
</div>

Padding is on the cells

We add the class bk-ltr to the panel-body and on each individual cell we add the class bk-pd-15.

1
col-xs-3
2
col-xs-3
3
col-xs-3
4
col-xs-3
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center bk-ltr">
        <div class="row">
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-15">
                1<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-15">
                2<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-15">
                3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-pd-15">
                4<br>
                col-xs-3
            </div>
        </div>
    </div>
</div>

Horizontal dividers are created with hr tags.

1
col-xs-4
2
col-xs-4
3
col-xs-4

1
col-xs-6
2
col-xs-6
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center">
        <div class="row">
            <div class="col-xs-4 bk-bd-light-gray-right">
                1<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right">
                2<br>
                col-xs-4
            </div>
            <div class="col-xs-4">
                3<br>
                col-xs-4
            </div>
        </div>

        <hr class="bk-hr-light-gray">

        <div class="row">
            <div class="col-xs-6 bk-bd-light-gray-right">
                1<br>
                col-xs-6
            </div>
            <div class="col-xs-6">
                2<br>
                col-xs-6
            </div>
        </div>
    </div>
</div>

More complex cell structures

1
col-xs-4
2
col-xs-4
3
col-xs-4

1
col-xs-3
2
col-xs-3
3
col-xs-3
4
col-xs-3

1
col-xs-6
2
col-xs-6
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center bk-rd bk-ltr">
        <div class="row">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                1<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                2<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-10">
                3<br>
                col-xs-4
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-off">

        <div class="row">
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                1<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                2<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-pd-10">
                4<br>
                col-xs-3
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-off">

        <div class="row">
            <div class="col-xs-6 bk-bd-light-gray-right bk-pd-10">
                1<br>
                col-xs-6
            </div>
            <div class="col-xs-6 bk-pd-10">
                2<br>
                col-xs-6
            </div>
        </div>
    </div>
</div>

Cross styles

1
col-xs-4
2
col-xs-4
3
col-xs-4

1
col-xs-4
2
col-xs-4
3
col-xs-4
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center bk-rd">
        <div class="row">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-b-10">
                1<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-b-10">
                2<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-b-10">
                3<br>
                col-xs-4
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-off">

        <div class="row">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-b-10">
                1<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-b-10">
                2<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-b-10">
                3<br>
                col-xs-4
            </div>
        </div>
    </div>
</div>
1
col-xs-4
2
col-xs-4
3
col-xs-4

1
col-xs-4
2
col-xs-4
3
col-xs-4
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center bk-rd bk-ltr">
        <div class="row">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                1<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                2<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-10">
                3<br>
                col-xs-4
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-off">

        <div class="row">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                1<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                2<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-10">
                3<br>
                col-xs-4
            </div>
        </div>
    </div>
</div>
inner cell
inner cell
inner cell
inner cell

inner cell
inner cell
inner cell
inner cell
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center bk-rd bk-ltr">
        <div class="row">
            <div class="col-xs-6 bk-bd-light-gray-right bk-ltr">
                <div class="row">
                    <div class="col-xs-6 bk-pd-off-l bk-pd-off-r bk-pd-t-15 bk-pd-b-15 bk-bg-very-light-gray">
                        inner cell
                    </div>
                    <div class="col-xs-6 bk-pd-off-l bk-pd-off-r bk-pd-t-15 bk-pd-b-15">
                        inner cell
                    </div>
                </div>
            </div>
            <div class="col-xs-6 bk-ltr">
                <div class="row">
                    <div class="col-xs-6 bk-pd-off-l bk-pd-off-r bk-pd-t-15 bk-pd-b-15 bk-bg-very-light-gray">
                        inner cell
                    </div>
                    <div class="col-xs-6 bk-pd-off-l bk-pd-off-r bk-pd-t-15 bk-pd-b-15">
                        inner cell
                    </div>
                </div>
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-off">

        <div class="row">
            <div class="col-xs-6 bk-bd-light-gray-right bk-ltr">
                <div class="row">
                    <div class="col-xs-6 bk-pd-off-l bk-pd-off-r bk-pd-t-15 bk-pd-b-15">
                        inner cell
                    </div>
                    <div class="col-xs-6 bk-pd-off-l bk-pd-off-r bk-pd-t-15 bk-pd-b-15 bk-bg-very-light-gray">
                        inner cell
                    </div>
                </div>
            </div>
            <div class="col-xs-6 bk-ltr">
                <div class="row">
                    <div class="col-xs-6 bk-pd-off-l bk-pd-off-r bk-pd-t-15 bk-pd-b-15">
                        inner cell
                    </div>
                    <div class="col-xs-6 bk-pd-off-l bk-pd-off-r bk-pd-t-15 bk-pd-b-15 bk-bg-very-light-gray">
                        inner cell
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

With a primary background color

1
col-xs-4
2
col-xs-4
3
col-xs-4

1
col-xs-3
2
col-xs-3
3
col-xs-3
4
col-xs-3

1
col-xs-6
2
col-xs-6
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-primary bk-fg-white text-center bk-rd bk-ltr">
        <div class="row">
            <div class="col-xs-4 bk-bd-white-right bk-pd-10">
                1<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-white-right bk-pd-10">
                2<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-10">
                3<br>
                col-xs-4
            </div>
        </div>

        <hr class="bk-hr-white bk-mg-off">

        <div class="row">
            <div class="col-xs-3 bk-bd-white-right bk-pd-10">
                1<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-white-right bk-pd-10">
                2<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-white-right bk-pd-10">
                3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-pd-10">
                4<br>
                col-xs-3
            </div>
        </div>

        <hr class="bk-hr-white bk-mg-off">

        <div class="row">
            <div class="col-xs-6 bk-bd-white-right bk-pd-10">
                1<br>
                col-xs-6
            </div>
            <div class="col-xs-6 bk-pd-10">
                2<br>
                col-xs-6
            </div>
        </div>
    </div>
</div>

Different background colors and some links

link 1
col-xs-4
2
col-xs-4
3
col-xs-4

1
col-xs-3
link 2
col-xs-3
3
col-xs-3
4
col-xs-3

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-primary bk-fg-white text-center bk-rd bk-ltr">
        <div class="row">
            <a class="col-xs-4 bk-bd-white-right bk-bg-primary bk-fg-white bk-bg-darken bk-pd-10">
                link 1<br>
                col-xs-4
            </a>
            <div class="col-xs-4 bk-bd-white-right bk-pd-10">
                2<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-10">
                3<br>
                col-xs-4
            </div>
        </div>

        <hr class="bk-hr-white bk-mg-off">

        <div class="row bk-bg-warning">
            <div class="col-xs-3 bk-bd-white-right bk-pd-10">
                1<br>
                col-xs-3
            </div>
            <a class="col-xs-3 bk-bd-white-right bk-bg-warning bk-bg-darken bk-fg-white bk-pd-10">
                link 2<br>
                col-xs-3
            </a>
            <div class="col-xs-3 bk-bd-white-right bk-pd-10">
                3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-pd-10">
                4<br>
                col-xs-3
            </div>
        </div>

        <hr class="bk-hr-white bk-mg-off">

        <div class="row">
            <div class="col-xs-6 bk-bd-white-right bk-pd-10">
                1<br>
                col-xs-6
            </div>
            <a class="col-xs-6 bk-pd-10 bk-bg-danger bk-bg-darken bk-fg-white bk-bg-danger">
                link 3<br>
                col-xs-6
            </a>
        </div>
    </div>
</div>

Social examples

6741
955
108
52
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center">
        <div class="row">
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-facebook bk-pd-t-5">
                <i class="fa fa-facebook fa-2x"></i>
                <div>6741</div>
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-twitter bk-pd-t-5">
                <i class="fa fa-twitter fa-2x"></i>
                <div>955</div>
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-google-plus bk-pd-t-5">
                <i class="fa fa-google-plus fa-2x"></i>
                <div>108</div>
            </div>
            <div class="col-xs-3 bk-fg-github bk-pd-t-5">
                <i class="fa fa-github fa-2x"></i>
                <div>52</div>
            </div>
        </div>
    </div>
</div>
652
1428
963
240
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center bk-ltr">
        <div class="row">
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-facebook bk-pd-15">
                <i class="fa fa-facebook fa-2x bk-pd-t-5"></i>
                <div>652</div>
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-twitter bk-pd-15">
                <i class="fa fa-twitter fa-2x bk-pd-t-5"></i>
                <div>1428</div>
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-google-plus bk-pd-15">
                <i class="fa fa-google-plus fa-2x bk-pd-t-5"></i>
                <div>963</div>
            </div>
            <div class="col-xs-3 bk-fg-github bk-pd-15">
                <i class="fa fa-github fa-2x bk-pd-t-5"></i>
                <div>240</div>
            </div>
        </div>
    </div>
</div>

USING TABLES

As explained in the alignment section this way of laying out the cells doesn't have the height disadvantages.

col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-3
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center bk-pd-off bk-pd-10">
        <div class="row bk-tbl">
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-15">
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-15">
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-15">
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-pd-15">
                col-xs-3
            </div>
        </div>
    </div>
</div>
col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-3
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center bk-pd-off">
        <div class="row bk-tbl">
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-15">
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-15">
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-15">
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-pd-15 bk-rd-r">
                col-xs-3
            </div>
        </div>
    </div>
</div>

Horizontal dividers are created with hr tags.

col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-3

col-xs-4
col-xs-4
col-xs-4
col-xs-4
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center bk-pd-10">
        <div class="row bk-tbl">
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-pd-10">
                col-xs-3
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-t-10 bk-mg-b-10">

        <div class="row bk-tbl">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                col-xs-4<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-10">
                col-xs-4
            </div>
        </div>
    </div>

</div>

More complex cell structures

col-xs-4
col-xs-4
col-xs-4
col-xs-4

col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-3

col-xs-6
col-xs-6
col-xs-6
<div class="panel bk-widget bk-bd-off">

    <div class="panel-body bk-bg-white text-center bk-pd-off">
        <div class="row bk-tbl">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                col-xs-4<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-10 bk-rd-t-r">
                col-xs-4
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-off">

        <div class="row bk-tbl">
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-pd-10">
                col-xs-3
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-off">

        <div class="row bk-tbl">
            <div class="col-xs-6 bk-bd-light-gray-right bk-pd-10">
                col-xs-6
            </div>
            <div class="col-xs-6 bk-rd-b-r bk-pd-10">
                col-xs-6<br>
                col-xs-6
            </div>
        </div>

    </div>

</div>

Cross styles

col-xs-4
col-xs-4
col-xs-4
col-xs-4

col-xs-4
col-xs-4
col-xs-4
col-xs-4
<div class="panel bk-widget bk-bd-off">

    <div class="panel-body bk-bg-white text-center bk-pd-10">

        <div class="row bk-tbl">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-15">
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-15">
                col-xs-4<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-15">
                col-xs-4
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-off">

        <div class="row bk-tbl">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-15">
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-15">
                col-xs-4<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-15">
                col-xs-4
            </div>
        </div>

    </div>

</div>
col-xs-4
col-xs-4
col-xs-4
col-xs-4

col-xs-4
col-xs-4
col-xs-4
col-xs-4
<div class="panel bk-widget bk-bd-off">

    <div class="panel-body bk-bg-white text-center bk-pd-off">

        <div class="row bk-tbl">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-15">
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-15">
                col-xs-4<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-15 bk-rd-t-r">
                col-xs-4
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-off">

        <div class="row bk-tbl">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-15">
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-15">
                col-xs-4<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-15 bk-rd-b-r">
                col-xs-4
            </div>
        </div>

    </div>

</div>
inner cell
inner cell
inner cell
inner cell

inner cell
inner cell
inner cell
inner cell
<div class="panel bk-widget bk-bd-off">

    <div class="panel-body bk-bg-white text-center bk-pd-off">

        <div class="row bk-tbl">
            <div class="col-xs-6 bk-bd-light-gray-right bk-pd-off">
                <div class="row bk-tbl">
                    <div class="col-xs-6 bk-pd-15 bk-bg-very-light-gray">inner cell</div>
                    <div class="col-xs-6">inner cell</div>
                </div>
            </div>
            <div class="col-xs-6 bk-pd-off">
                <div class="row bk-tbl">
                    <div class="col-xs-6 bk-pd-15 bk-bg-very-light-gray">inner cell</div>
                    <div class="col-xs-6 bk-bg-white bk-rd-t-r">inner cell</div>
                </div>
            </div>
        </div>

    </div>

    <hr class="bk-hr-light-gray bk-mg-off">

    <div class="panel-body bk-bg-very-light-gray text-center bk-pd-off">

        <div class="row bk-tbl">
            <div class="col-xs-6 bk-bd-light-gray-right bk-pd-off">
                <div class="row bk-tbl">
                    <div class="col-xs-6 bk-bg-white bk-pd-15">inner cell</div>
                    <div class="col-xs-6 bk-bg-very-light-gray">inner cell</div>
                </div>
            </div>
            <div class="col-xs-6 bk-pd-off">
                <div class="row bk-tbl">
                    <div class="col-xs-6 bk-pd-15 bk-bg-white">inner cell</div>
                    <div class="col-xs-6 bk-bg-very-light-gray bk-rd-b-r">inner cell</div>
                </div>
            </div>
        </div>

    </div>

</div>

With a primary background color

col-xs-4
col-xs-4
col-xs-4
col-xs-4

col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-3
col-xs-3

col-xs-6
col-xs-6
col-xs-6
<div class="panel bk-widget bk-bd-off">

    <div class="panel-body bk-bg-primary bk-fg-white text-center bk-pd-off">
        <div class="row bk-tbl">
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bd-light-gray-right bk-pd-10">
                col-xs-4<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-pd-10 bk-rd-t-r">
                col-xs-4
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-off">

        <div class="row bk-tbl">
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-pd-10">
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-pd-10">
                col-xs-3
            </div>
        </div>

        <hr class="bk-hr-light-gray bk-mg-off">

        <div class="row bk-tbl">
            <div class="col-xs-6 bk-bd-light-gray-right bk-pd-10">
                col-xs-6
            </div>
            <div class="col-xs-6 bk-rd-b-r bk-pd-10">
                col-xs-6<br>
                col-xs-6
            </div>
        </div>

    </div>

</div>

Different background colors and some links

link 1
col-xs-4
col-xs-4
col-xs-4
col-xs-4

col-xs-3
link 2
col-xs-3
col-xs-3
col-xs-3
col-xs-3

<div class="panel bk-widget bk-bd-off">

    <div class="panel-body bk-fg-white text-center bk-pd-off">
        <div class="row bk-tbl">
            <a href="javascript:" class="col-xs-4 bk-bd-white-right bk-pd-10 bk-fg-white bk-bg-primary bk-bg-darken">
                link 1<br>
                col-xs-4
            </a>
            <div class="col-xs-4 bk-bg-primary bk-bd-white-right bk-pd-10">
                col-xs-4<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-bg-primary bk-pd-10 bk-rd-t-r">
                col-xs-4
            </div>
        </div>

        <hr class="bk-hr-white bk-mg-off">

        <div class="row bk-tbl bk-bg-warning">
            <div class="col-xs-3 bk-bd-white-right bk-pd-10">
                col-xs-3
            </div>
            <a href="javascript:" class="col-xs-3 bk-bd-white-right bk-pd-10 bk-fg-white bk-bg-warning bk-bg-darken">
                link 2<br>
                col-xs-3
            </a>
            <div class="col-xs-3 bk-bd-white-right bk-pd-10">
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-pd-10">
                col-xs-3
            </div>
        </div>

        <hr class="bk-hr-white bk-mg-off">

        <div class="row bk-tbl bk-bg-danger">
            <div class="col-xs-6 bk-bg-primary bk-bd-white-right bk-pd-10">
                col-xs-6
            </div>
            <a href="javascript:" class="col-xs-6 bk-rd-b-r bk-pd-10 bk-fg-white bk-bg-danger bk-bg-darken">
                link 3<br>
                col-xs-6
            </a>
        </div>

    </div>

</div>

Social examples

6741
955
108
52
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center bk-pd-off-l bk-pd-off-r bk-pd-t-15 bk-pd-b-15">
        <div class="row bk-tbl">
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-facebook">
                <i class="fa fa-facebook fa-2x bk-pd-t-5"></i>
                <div>6741</div>
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-twitter">
                <i class="fa fa-twitter fa-2x bk-pd-t-5"></i>
                <div>955</div>
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-google-plus">
                <i class="fa fa-google-plus fa-2x bk-pd-t-5"></i>
                <div>108</div>
            </div>
            <div class="col-xs-3 bk-fg-github">
                <i class="fa fa-github fa-2x bk-pd-t-5"></i>
                <div>52</div>
            </div>
        </div>
    </div>
</div>
652
1428
963
240
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white text-center bk-pd-off">
        <div class="row bk-tbl">
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-facebook bk-pd-15">
                <i class="fa fa-facebook fa-2x bk-pd-t-5"></i>
                <div>652</div>
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-twitter bk-pd-15">
                <i class="fa fa-twitter fa-2x bk-pd-t-5"></i>
                <div>1428</div>
            </div>
            <div class="col-xs-3 bk-bd-light-gray-right bk-fg-google-plus bk-pd-15">
                <i class="fa fa-google-plus fa-2x bk-pd-t-5"></i>
                <div>963</div>
            </div>
            <div class="col-xs-3 bk-pd-15 bk-rd-r bk-fg-github">
                <i class="fa fa-github fa-2x bk-pd-t-5"></i>
                <div>240</div>
            </div>
        </div>
    </div>
</div>