BootKit home · Manual home

GRADIENTS

Different gradient presets are available for backgrounds.
By default the color shift is 20% but this can easily be changed with one LESS variable.


Remarks:
- Each color can make use of all these styles which means there are 8 available classes for each color.
- There is no hover functionality for gradient backgrounds. - Some of these do not work in IE9 (directional and radial)

Vertical

Top to bottom

23 TASKS
18 COMPLETED

Srinivas Tamada

Senior Developer

Bottom to top

23 TASKS
18 COMPLETED

Srinivas Tamada

Senior Developer
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-grd-v-t-primary bk-fg-white text-center">
        <div class="row">
            <div class="col-xs-6 text-left">
                <small>23 TASKS</small>
            </div>
            <div class="col-xs-6 text-right">
                <small>18 COMPLETED</small>
            </div>
        </div>
        <div class="bk-avatar">
            <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-100 bk-bd-white">
        </div>
        <h4 class="bk-mg-off bk-pd-t-10">Srinivas Tamada</h4>
        <small>Senior Developer</small>
        <div class="row">
            <div class="col-xs-6 text-left">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-user"></i> View profile</small></a>
            </div>
            <div class="col-xs-6 text-right">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-envelope-o"></i> Contact</small></a>
            </div>
        </div>
    </div>
</div>

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-grd-v-b-success bk-fg-white text-center">
        <div class="row">
            <div class="col-xs-6 text-left">
                <small>23 TASKS</small>
            </div>
            <div class="col-xs-6 text-right">
                <small>18 COMPLETED</small>
            </div>
        </div>
        <div class="bk-avatar">
            <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-100 bk-bd-white">
        </div>
        <h4 class="bk-mg-off bk-pd-t-10">Srinivas Tamada</h4>
        <small>Senior Developer</small>
        <div class="row">
            <div class="col-xs-6 text-left">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-user"></i> View profile</small></a>
            </div>
            <div class="col-xs-6 text-right">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-envelope-o"></i> Contact</small></a>
            </div>
        </div>
    </div>
</div>

Horizontal

From the left

23 TASKS
18 COMPLETED

Srinivas Tamada

Senior Developer

From the right

23 TASKS
18 COMPLETED

Srinivas Tamada

Senior Developer
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-grd-h-l-info bk-fg-white text-center">
        <div class="row">
            <div class="col-xs-6 text-left">
                <small>23 TASKS</small>
            </div>
            <div class="col-xs-6 text-right">
                <small>18 COMPLETED</small>
            </div>
        </div>
        <div class="bk-avatar">
            <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-100 bk-bd-white">
        </div>
        <h4 class="bk-mg-off bk-pd-t-10">Srinivas Tamada</h4>
        <small>Senior Developer</small>
        <div class="row">
            <div class="col-xs-6 text-left">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-user"></i> View profile</small></a>
            </div>
            <div class="col-xs-6 text-right">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-envelope-o"></i> Contact</small></a>
            </div>
        </div>
    </div>
</div>

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-grd-h-r-warning bk-fg-white text-center">
        <div class="row">
            <div class="col-xs-6 text-left">
                <small>23 TASKS</small>
            </div>
            <div class="col-xs-6 text-right">
                <small>18 COMPLETED</small>
            </div>
        </div>
        <div class="bk-avatar">
            <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-100 bk-bd-white">
        </div>
        <h4 class="bk-mg-off bk-pd-t-10">Srinivas Tamada</h4>
        <small>Senior Developer</small>
        <div class="row">
            <div class="col-xs-6 text-left">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-user"></i> View profile</small></a>
            </div>
            <div class="col-xs-6 text-right">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-envelope-o"></i> Contact</small></a>
            </div>
        </div>
    </div>
</div>

Directional (no IE9 support!)

135deg

23 TASKS
18 COMPLETED

Srinivas Tamada

Senior Developer

45deg

23 TASKS
18 COMPLETED

Srinivas Tamada

Senior Developer
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-grd-d-135-danger bk-fg-white text-center">
        <div class="row">
            <div class="col-xs-6 text-left">
                <small>23 TASKS</small>
            </div>
            <div class="col-xs-6 text-right">
                <small>18 COMPLETED</small>
            </div>
        </div>
        <div class="bk-avatar">
            <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-100 bk-bd-white">
        </div>
        <h4 class="bk-mg-off bk-pd-t-10">Srinivas Tamada</h4>
        <small>Senior Developer</small>
        <div class="row">
            <div class="col-xs-6 text-left">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-user"></i> View profile</small></a>
            </div>
            <div class="col-xs-6 text-right">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-envelope-o"></i> Contact</small></a>
            </div>
        </div>
    </div>
</div>

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-grd-d-45-light-gray bk-fg-white text-center">
        <div class="row">
            <div class="col-xs-6 text-left">
                <small>23 TASKS</small>
            </div>
            <div class="col-xs-6 text-right">
                <small>18 COMPLETED</small>
            </div>
        </div>
        <div class="bk-avatar">
            <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-100 bk-bd-white">
        </div>
        <h4 class="bk-mg-off bk-pd-t-10">Srinivas Tamada</h4>
        <small>Senior Developer</small>
        <div class="row">
            <div class="col-xs-6 text-left">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-user"></i> View profile</small></a>
            </div>
            <div class="col-xs-6 text-right">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-envelope-o"></i> Contact</small></a>
            </div>
        </div>
    </div>
</div>

Radial (no IE9 support!)

23 TASKS
18 COMPLETED

Srinivas Tamada

Senior Developer

Striped

23 TASKS
18 COMPLETED

Srinivas Tamada

Senior Developer
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-grd-r-gray bk-fg-white text-center">
        <div class="row">
            <div class="col-xs-6 text-left">
                <small>23 TASKS</small>
            </div>
            <div class="col-xs-6 text-right">
                <small>18 COMPLETED</small>
            </div>
        </div>
        <div class="bk-avatar">
            <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-100 bk-bd-white">
        </div>
        <h4 class="bk-mg-off bk-pd-t-10">Srinivas Tamada</h4>
        <small>Senior Developer</small>
        <div class="row">
            <div class="col-xs-6 text-left">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-user"></i> View profile</small></a>
            </div>
            <div class="col-xs-6 text-right">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-envelope-o"></i> Contact</small></a>
            </div>
        </div>
    </div>
</div>

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-grd-s-inverse bk-fg-white text-center">
        <div class="row">
            <div class="col-xs-6 text-left">
                <small>23 TASKS</small>
            </div>
            <div class="col-xs-6 text-right">
                <small>18 COMPLETED</small>
            </div>
        </div>
        <div class="bk-avatar">
            <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-100 bk-bd-white">
        </div>
        <h4 class="bk-mg-off bk-pd-t-10">Srinivas Tamada</h4>
        <small>Senior Developer</small>
        <div class="row">
            <div class="col-xs-6 text-left">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-user"></i> View profile</small></a>
            </div>
            <div class="col-xs-6 text-right">
                <a href="javascript:" class="bk-fg-white"><small><i class="fa fa-envelope-o"></i> Contact</small></a>
            </div>
        </div>
    </div>
</div>