BootKit home · Manual home

SEVEN COLUMNS

As there are seven days in one week we need a custom column structure that will come in handy when creating date-related structured like for example weather widgets.


Available classes

Example with col-xs-1

18°

LONDON

Feels like: 16°
Humidity: 62%

Example with col-sm-1

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white bk-pd-off-b bk-pd-t-15">
        <div class="row">
            <div class="col-xs-4 bk-vcenter">
                <h2 class="bk-mg-off">18°</h2>
            </div>
            <div class="col-xs-8 bk-vcenter text-right">
                <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> LONDON</h4>
            </div>
        </div>
        <div class="text-center bk-pd-b-20 bk-pd-t-20">
            <i class="wi wi-rain-wind fa-5x"></i>
            <i class="fa fa-long-arrow-right fa-2x bk-pd-l-10 bk-pd-r-10"></i>
            <i class="wi wi-day-cloudy-gusts fa-5x"></i>
        </div>
        <div class="row bk-mg-t-15 bk-mg-b-10">
            <div class="col-xs-6">
                Feels like: 16°
            </div>
            <div class="col-xs-6 text-right">
                Humidity: 62%
            </div>
        </div>
    </div>
    <div class="panel-body bk-ltr">
        <div class="row bk-seven-cols text-center bk-bg-very-light-gray">

            <div class="col-xs-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    M
                </a>
            </div>
            <div class="col-xs-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    T
                </a>
            </div>
            <div class="col-xs-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    W
                </a>
            </div>
            <div class="col-xs-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    T
                </a>
            </div>
            <div class="col-xs-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-bg-very-light-gray bk-bg-lighten bk-fg-inverse bk-fg-lighten bk-block">
                    F
                </a>
            </div>
            <div class="col-xs-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    S
                </a>
            </div>
            <div class="col-xs-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    S
                </a>
            </div>

        </div>
    </div>
</div>
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white bk-pd-off-b bk-pd-t-15">
        <div class="row">
            <div class="col-xs-4 bk-vcenter">
                <h2 class="bk-mg-off">18°</h2>
            </div>
            <div class="col-xs-8 bk-vcenter text-right">
                <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> LONDON</h4>
            </div>
        </div>
        <div class="text-center bk-pd-b-20 bk-pd-t-20">
            <i class="wi wi-rain-wind fa-5x"></i>
            <i class="fa fa-long-arrow-right fa-2x bk-pd-l-10 bk-pd-r-10"></i>
            <i class="wi wi-day-cloudy-gusts fa-5x"></i>
        </div>
        <div class="row bk-mg-t-15 bk-mg-b-10">
            <div class="col-xs-6">
                Feels like: 16°
            </div>
            <div class="col-xs-6 text-right">
                Humidity: 62%
            </div>
        </div>
    </div>
    <div class="panel-body bk-ltr">
        <div class="row bk-seven-cols text-center bk-bg-very-light-gray">

            <div class="col-sm-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    <span class="hidden-xs">M</span>
                    <span class="visible-xs">Monday</span>
                </a>
            </div>
            <div class="col-sm-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    <span class="hidden-xs">T</span>
                    <span class="visible-xs">Tuesday</span>
                </a>
            </div>
            <div class="col-sm-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    <span class="hidden-xs">W</span>
                    <span class="visible-xs">Wednesday</span>
                </a>
            </div>
            <div class="col-sm-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    <span class="hidden-xs">T</span>
                    <span class="visible-xs">Thursday</span>
                </a>
            </div>
            <div class="col-sm-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-bg-very-light-gray bk-bg-lighten bk-fg-inverse bk-fg-lighten bk-block">
                    <span class="hidden-xs">F</span>
                    <span class="visible-xs">Friday</span>
                </a>
            </div>
            <div class="col-sm-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    <span class="hidden-xs">S</span>
                    <span class="visible-xs">Saturday</span>
                </a>
            </div>
            <div class="col-sm-1 bk-pd-off">
                <a href="javascript:" class="bk-pd-10 bk-fg-danger bk-fg-darken bk-bg-very-light-gray bk-bg-lighten bk-block">
                    <span class="hidden-xs">S</span>
                    <span class="visible-xs">Sunday</span>
                </a>
            </div>

        </div>
    </div>
</div>