BootKit home · Manual home

ALIGNMENT

Vertical alignment and centering on panel-body or row/column structures and individual cells.


A. USING INLINE-BLOCK

*When supporting IE8 is a necessity*

Available classes

Basic examples

Super simple with only one background color

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-ltr text-center bk-fg-white">
        <div class="row bk-bg-danger">
            <div class="col-xs-4 bk-vcenter bk-pd-15">
                col-xs-4<br>
                col-xs-4
            </div>
            <div class="col-xs-4 bk-vcenter bk-pd-15">
                col-xs-4
            </div>
            <div class="col-xs-4 bk-vcenter bk-pd-15">
                col-xs-4<br>
                col-xs-4
            </div>
        </div>
    </div>
</div>

We add the class bk-pd-15 to the cells so that they always have some spacing around their content. If you need less or more padding several additional padding classes are available like for example bk-pd-10 or bk-pd-40.

No link

col-xs-6
col-xs-6
col-xs-6

One link (works on maximum 2 cells)

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-ltr text-center">
        <div class="row">
            <div class="col-xs-6 bk-vcenter bk-pd-15 bk-bg-primary">
                col-xs-6<br>
                col-xs-6
            </div>
            <div class="col-xs-6 bk-vcenter bk-pd-15">
                col-xs-6
            </div>
        </div>
    </div>
</div>

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-ltr text-center bk-fg-white bk-bg-info bk-bg-darken">
        <div class="row">
            <div class="col-xs-6 bk-vcenter bk-pd-15 bk-bg-primary bk-bg-darken">
                col-xs-6<br>
                col-xs-6
            </div>
            <div class="col-xs-6 bk-vcenter">
                col-xs-6
            </div>
        </div>
    </a>
</div>

Complex structures

Example A: equal height content

With equal height content in cells there is no height issue:

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

Example B: non-equal height content

With non-equal height inside cells we have an issue:

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

Solution: defining height

This is the simpelest solution without having to rely on hacks or table structures (more on that below).

Adding a height in pixels to the parent row and height: 100% to its children will solve the issue.
We can't use bk-vcenter on the cells anymore as we override parent height (row).
We can however use them as an inner code like <div class="bk-vcenter"></div>.
We can also do <div class="bk-vcenter bk-bottom"></div> to set the content of the cell to bottom.

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-ltr text-center">
        <div class="row" style="height: 100px;">
            <a href="javascript:" class="col-xs-4 bk-pd-15 bk-bg-primary bk-bg-darken bk-fg-white bk-col-100pct">
                col-xs-4<br>
                col-xs-4
            </a>
            <a href="javascript:" class="col-xs-4 bk-pd-15 bk-bg-info bk-bg-darken bk-fg-white bk-col-100pct">
                <div class="bk-vcenter"></div>
                col-xs-4
            </a>
            <a href="javascript:" class="col-xs-4 bk-pd-15 bk-bg-danger bk-bg-darken bk-fg-white bk-col-100pct">
                <div class="bk-vcenter bk-bottom"></div>
                col-xs-4
            </a>
        </div>
    </div>
</div>

B. USING TABLES

Available classes

Examples

col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
col-xs-8
<div class="row">
    <div class="col-sm-3">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-pd-off">
                <div class="row bk-tbl text-center">
                    <div class="col-xs-8 bk-bg-white">
                        <div class="bk-pd-15">
                            col-xs-8<br>
                            col-xs-8
                        </div>
                    </div>
                    <div class="col-xs-4 bk-bg-primary bk-fg-white bk-rd-r">
                        <em class="fa fa-globe fa-2x bk-pd-t-5"></em>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-pd-off">
                <div class="row bk-tbl text-center">
                    <div class="col-xs-8 bk-bg-white">
                        <div class="bk-pd-15">
                            col-xs-8<br>
                            col-xs-8
                        </div>
                    </div>
                    <div class="col-xs-4 bk-bg-info">
                        <em class="fa fa-rocket fa-2x bk-fg-white bk-rd-r bk-pd-t-5"></em>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-pd-off">
                <div class="row bk-tbl text-center">
                    <div class="col-xs-8 bk-bg-white">
                        <div class="bk-pd-15">
                            col-xs-8<br>
                            col-xs-8
                        </div>
                    </div>
                    <div class="col-xs-4 bk-bg-warning">
                        <em class="fa fa-pencil fa-2x bk-fg-white bk-rd-r bk-pd-t-5"></em>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-pd-off">
                <div class="row bk-tbl text-center">
                    <div class="col-xs-8 bk-bg-white">
                        <div class="bk-pd-15">
                            col-xs-8<br>
                            col-xs-8
                        </div>
                    </div>
                    <div class="col-xs-4 bk-bg-danger bk-fg-white bk-rd-r bk-pd-t-5">
                        <em class="fa fa-tasks fa-2x"></em>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row">
    <div class="col-sm-4">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-pd-off">
                <div class="row bk-tbl text-center">
                    <div class="col-xs-4 bk-bg-success">
                        <em class="fa fa-tasks fa-2x bk-fg-white bk-pd-t-5"></em>
                    </div>
                    <div class="col-xs-8 bk-bg-white bk-rd-r">
                        <div class="bk-pd-15">
                            col-xs-8<br>
                            col-xs-8<br>
                            col-xs-8
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-pd-off">
                <div class="row bk-tbl text-center">
                    <div class="col-xs-4 bk-bg-gray">
                        <em class="fa fa-tachometer fa-2x bk-fg-white bk-pd-t-5"></em>
                    </div>
                    <div class="col-xs-8 bk-bg-white bk-rd-r">
                        <div class="bk-pd-15">
                            col-xs-8<br>
                            col-xs-8<br>
                            col-xs-8
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-pd-off">
                <div class="row bk-tbl text-center">
                    <div class="col-xs-4 bk-bg-inverse">
                        <em class="fa fa-gears fa-2x bk-fg-white bk-pd-t-5"></em>
                    </div>
                    <div class="col-xs-8 bk-bg-white bk-rd-r">
                        <div class="bk-pd-15">
                            col-xs-8<br>
                            col-xs-8<br>
                            col-xs-8
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

ISSUES! (fix explanation below)

Bug overview
In Chromium there's a problem with the table with: 100% not respecting the width of the parent.
Bootstrap bug report page.
Chromium bug report page.
The bug is also listed in the Bootstrap wall of browser bugs.

Is there a fix?
First of all there's a hack to add subpixel width e.g. width: 100.6% or width: 100.9% but I am reluctant to add it for the following reasons:
- it doesn't really fix it, it just makes it look a bit better;
- it influences other browsers;
- it's a hack

YES, THERE IS A FIX!
We make sure that there is no background color defined on our widget (turned off by default on panel) and when needed we add border radius manually with bk-rd-*. There are several possibilities, usually I just add bk-rd-r to the last cell. This makes it look almost perfect in Chromium and the other browsers are not affected by it.
Remaining issue is that the panel box shadow will show a small gap between the last cell and the panel edge. There's not much that can be done here. In some cases this can be fixed by adding the corresponding background color to the panel body (see example below).

Examples of the original bug in Chrome can be found below.

Using background color on panel body (matching the right cell) to fix spacing issue:

col-xs-8
col-xs-8
col-xs-8
col-xs-8
<div class="panel bk-widget bk-bd-off" style="box-shadow: 1px 1px 3px #000">
    <div class="panel-body bk-bg-primary bk-pd-off">
        <div class="row bk-tbl text-center">
            <div class="col-xs-8 bk-bg-white">
                <div class="bk-pd-15">
                    col-xs-8<br>
                    col-xs-8
                </div>
            </div>
            <div class="col-xs-4 bk-bg-primary bk-fg-white bk-rd-r">
                <em class="fa fa-globe fa-2x bk-pd-t-5"></em>
            </div>
        </div>
    </div>
</div>

Example images of bugs


Black arrows mark gaps where the browser is unable to handle the width correctly.

Complex structures

By using the table layout we do not encounter the vertical alignment issues and limitations found when using inline-block (see top of page).
The radius trick explained above is used to fix rounded corners in Chromium. Lots of extra markup for one browser! It will get better ... eventually.

Separate links

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-pd-off">
        <div class="row bk-tbl text-center">
            <a href="javascript:" class="col-xs-3 bk-bg-info bk-bg-lighten bk-pd-15 bk-bottom bk-fg-white bk-rd-l">
                aligned to bottom
            </a>
            <a href="javascript:" class="col-xs-3 bk-bg-danger bk-bg-lighten bk-fg-white">
                centered content
            </a>
            <a href="javascript:" class="col-xs-3 bk-pd-15 bk-bg-success bk-bg-lighten bk-fg-white">
                col-xs-3<br>
                col-xs-3<br>
                col-xs-3<br>
                col-xs-3<br>
                col-xs-3<br>
                col-xs-3
            </a>
            <a href="javascript:" class="col-xs-3 bk-pd-15 bk-bg-warning bk-bg-lighten bk-fg-white bk-top bk-rd-r">
                aligned to top
            </a>
        </div>
    </div>
</div>

One link

<div class="panel bk-widget bk-bd-off">
    <a class="panel-body bk-pd-off">
        <div class="row bk-tbl text-center">
            <div class="col-xs-3 bk-bg-info bk-bg-lighten bk-pd-15 bk-bottom bk-fg-white bk-rd-l">
                aligned to bottom
            </div>
            <div class="col-xs-3 bk-bg-danger bk-bg-lighten bk-fg-white">
                centered content
            </div>
            <div class="col-xs-3 bk-pd-15 bk-bg-success bk-bg-lighten bk-fg-white">
                col-xs-3<br>
                col-xs-3<br>
                col-xs-3<br>
                col-xs-3<br>
                col-xs-3<br>
                col-xs-3
            </div>
            <div class="col-xs-3 bk-pd-15 bk-bg-warning bk-bg-lighten bk-fg-white bk-top bk-rd-r">
                aligned to top
            </div>
        </div>
    </a>
</div>