BootKit home · Manual home

COLORED WIDGETS


Set I

4,566

VISITS TODAY

480

SUPPORT TICKETS

15,984

SALES THIS MONTH

85%

DATABASE USAGE

25,889

ORDERS THIS WEEK

124

FORKS

651

COMMENTS

74%

BOUNCE RATE

9,882

PENDING TASKS
<div class="panel bk-widget bk-bd-off bk-fg-white bk-rd-off">
    <div class="panel-body bk-bg-primary bk-ltr">
        <div class="row bk-pd-15">
            <div class="col-xs-8 bk-pd-off bk-vcenter">
                <h2 class="bk-mg-off bk-700">4,566</h2>
            </div>
            <div class="col-xs-4 bk-pd-off bk-vcenter text-right">
                <i class="fa fa-users fa-2x"></i>
            </div>
        </div>
    </div>
    <div class="panel-body bk-bg-primary-darker bk-sml bk-ltr">
        <div class="row bk-pd-t-5 bk-pd-b-5">
            <div class="col-xs-8 bk-vcenter">
                VISITS TODAY
            </div>
            <div class="col-xs-4 bk-vcenter text-right">
                <a href="javascript:" class="bk-fg-white">View details</a>
            </div>
        </div>
    </div>
</div>

Variations

Lighter bottom body

4,566

VISITS TODAY

Darker and lighter together

4,566

VISITS TODAY

With links

<div class="panel bk-widget bk-bd-off bk-fg-white bk-rd-off">
    <a href="javascript:" class="panel-body bk-bg-primary bk-bg-darken bk-fg-white bk-ltr">
        <div class="row bk-pd-15">
            <div class="col-xs-8 bk-pd-off bk-vcenter">
                <h2 class="bk-mg-off bk-700">4,566</h2>
            </div>
            <div class="col-xs-4 bk-pd-off bk-vcenter text-right">
                <i class="fa fa-users fa-2x"></i>
            </div>
        </div>
        <div class="bk-bg-primary-darker bk-sml bk-pd-t-5 bk-pd-b-5 bk-pd-l-15 bk-pd-r-15">
            VISITS TODAY
        </div>
    </a>
</div>

Set II

<div class="panel bk-widget bk-bd-off bk-webkit-fix">
    <a class="panel-body bk-bg-success bk-bg-darken bk-fg-white">
        <div class="row">
            <div class="col-xs-7 text-left">
                <h1 class="bk-mg-off bk-300">563</h1>
                NEW VISITORS<br>
                <hr class="bk-hr-white bk-opacity-2 bk-mg-t-5 bk-mg-b-5">
                <small><i class="fa fa-angle-up"></i> +15% better then last week</small>
            </div>
            <div class="col-xs-5 text-right">
                <i class="fa fa-globe fa-4x bk-mg-r-5"></i>
            </div>
        </div>
    </a>
</div>

Set III

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-bg-primary bk-bg-lighten bk-fg-white text-center">
        <h4 class="bk-mg-off">Srinivas Tamada</h4>
        <small>Senior Developer</small>
        <div class="bk-avatar bk-pd-t-10">
            <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-120 bk-bd-white bk-bd-3x">
        </div>
        <div class="row bk-pd-t-10">
            <div class="col-xs-4">
                <i class="fa fa-briefcase"></i> 8
            </div>
            <div class="col-xs-4">
                <i class="fa fa-envelope-o"></i> 13
            </div>
            <div class="col-xs-4">
                <i class="fa fa-wrench"></i> 52
            </div>
        </div>
    </a>
</div>

Set IV

Chris Pearson

SUPPORT ANALYST

"Curabitur nisi ipsum, accumsan id urna facilisis, commodo tempus turpis. Mauris lobortis elit eget bibendum ultrices."

Chealsea Otakan

SUPPORT ANALYST

"Curabitur nisi ipsum, accumsan id urna facilisis, commodo tempus turpis. Mauris lobortis elit eget bibendum ultrices."

Ghaida Zehran

SUPPORT ANALYST

"Curabitur nisi ipsum, accumsan id urna facilisis, commodo tempus turpis. Mauris lobortis elit eget bibendum ultrices."

Chris Pearson

SUPPORT ANALYST

"Curabitur nisi ipsum, accumsan id urna facilisis, commodo tempus turpis. Mauris lobortis elit eget bibendum ultrices."

Chelsea Otakan

SUPPORT ANALYST

"Curabitur nisi ipsum, accumsan id urna facilisis, commodo tempus turpis. Mauris lobortis elit eget bibendum ultrices."

Ghaida Zehran

SUPPORT ANALYST

"Curabitur nisi ipsum, accumsan id urna facilisis, commodo tempus turpis. Mauris lobortis elit eget bibendum ultrices."

<div class="panel bk-widget bk-bd-off bk-chrome-fix">
    <div class="panel-body text-center bk-pd-off bk-wrapper">
        <img src="img/flat-sun.jpg" class="img-responsive bk-rd-t">
        <div class="bk-avatar bk-avatar100-halfdown">
            <div class="bk-vcenter"></div>
            <a href="javascript:">
                <img src="img/face/chris-128.jpg" alt="" class="img-circle bk-img-100 bk-bd-white bk-bd-darken bk-bd-3x">
            </a>
        </div>
    </div>
    <div class="panel-body bk-pd-b-10 bk-avatar100-halfdown-after text-center bk-bg-primary">
        <h3 class="bk-mg-off"><strong>Chris Pearson</strong></h3>
        <small class="bk-fg-inverse">SUPPORT ANALYST</small>
        <p class="bk-mg-off-b bk-fg-white">
            <em>"Curabitur nisi ipsum, accumsan id urna facilisis, commodo tempus turpis. Mauris lobortis elit eget bibendum
                ultrices."</em>
        </p>
    </div>
    <div class="panel-body bk-pd-off-b bk-pd-off-t">
        <div class="row text-center">
            <a class="col-xs-4 bk-bg-primary bk-bg-darken bk-fg-white bk-700 bk-pd-t-10 bk-pd-b-10">
                <small class="bk-fg-darken">TODO</small>
                <h4 class="bk-300 bk-mg-off-b">852</h4>
            </a>
            <a class="col-xs-4 bk-bg-primary bk-bg-darken bk-fg-white bk-700 bk-pd-t-10 bk-pd-b-10">
                <small class="bk-fg-darken">PROCESSED</small>
                <h4 class="bk-300 bk-mg-off-b">366</h4>
            </a>
            <a class="col-xs-4 bk-bg-primary bk-bg-darken bk-fg-white bk-700 bk-pd-t-10 bk-pd-b-10">
                <small class="bk-fg-darken">ESCALATED</small>
                <h4 class="bk-300 bk-mg-off-b">901</h4>
            </a>
        </div>
    </div>
</div>

SET V

195

SALES TODAY

227,456

UNIQUE VIEWS

8,652

TASKS

77,315

LIKES

1,852

SHARES

5,562

DOWNLOADS
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-primary bk-fg-white">
        <div class="row bk-mg-b-15">
            <div class="col-xs-8">
                <h2 class="bk-mg-off bk-300">195</h2>
                SALES TODAY
            </div>
            <div class="col-xs-4 text-right">
                <i class="fa fa-shopping-cart fa-3x"></i>
            </div>
        </div>
        <span class="sparkline-widget-white" values="9,13,10,9,15,8,9,11,20,16,14,21,15,18,17,23,25,28,8,11,12,29"></span>
    </div>
</div>

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-danger bk-fg-white bk-pd-off">
        <div class="row bk-pd-15">
            <div class="col-xs-8">
                <h2 class="bk-mg-off bk-300">77,315</h2>
                LIKES
            </div>
            <div class="col-xs-4 text-right">
                <i class="fa fa-thumbs-up fa-3x"></i>
            </div>
        </div>
        <div class="bk-mg-b-15">
            <span class="sparkline-widget-white" values="21,15,18,17,23,25,28,8,11,12,29,9,13,10,9,15,8,9,11,20,16,14"></span>
        </div>
    </div>
</div>

SET VI

Project X-ray

Chris Pearson

LEAD DEVELOPER
SCRUM MASTER

Latest Comments

just now

Project X version 2.2.3 is now live!


36' ago

Finalizing Project X version 2.2.3 on the live server - tests are looking ok.


1h45' ago

Project X version 2.2.3 is now live!

Project Zulu

Chris Pearson

LEAD DEVELOPER
SCRUM MASTER

Contact

Latest Comments

11' ago

Zulu project is coming along nicely!


2h45 ago

Zulu monday meeting results can be found in the usual place.


yesterday

Dev servers are online now so go nuts :D

<div class="panel bk-widget bk-rd-off bk-box-shadow-off bk-bd-off">
    <div class="panel-body text-center bk-pd-off bk-wrapper bk-bg-primary bk-rd-t" style="height: 100px;">
        <h4 class="bk-fg-white bk-700 text-uppercase">Project X-ray</h4>
        <div class="bk-avatar bk-avatar100-halfdown">
            <div class="bk-vcenter"></div>
            <a href="javascript:" class="bk-fg-danger bk-fg-darken">
                <img src="img/face/chris-128.jpg" alt="" class="img-circle bk-img-100 bk-bd-white bk-bd-darken bk-bd-3x">
            </a>
        </div>
    </div>
    <div class="panel-body bk-pd-b-10 bk-avatar100-halfdown-after text-center bk-bg-white">
        <h3 class="bk-mg-off"><strong>Chris Pearson</strong></h3>
        <small>LEAD DEVELOPER<br>SCRUM MASTER</small>

        <div class="row bk-d-mg-xs">
            <ul class="list-inline list-unstyled bk-mg-off-b">
                <li class="bk-pd-off">
                    <a href="javascript:" class="bk-icon bk-icon-default bk-round bk-bg-facebook bk-bd-off bk-fg-white bk-opacity-inv">
                        <i class="fa fa-facebook"></i>
                    </a>
                </li>
                <li class="bk-pd-off">
                    <a href="javascript:" class="bk-icon bk-icon-default bk-round bk-bg-twitter bk-bd-off bk-fg-white bk-opacity-inv">
                        <i class="fa fa-twitter"></i>
                    </a>
                </li>
                <li class="bk-pd-off">
                    <a href="javascript:" class="bk-icon bk-icon-default bk-round bk-bg-google-plus bk-bd-off bk-fg-white bk-opacity-inv">
                        <i class="fa fa-google-plus"></i>
                    </a>
                </li>
                <li class="bk-pd-off">
                    <a href="javascript:" class="bk-icon bk-icon-default bk-round bk-bg-github bk-bd-off bk-fg-white bk-opacity-inv">
                        <i class="fa fa-github"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel-body bk-bg-primary bk-fg-white bk-rd-b bk-pd-b-5">
        <p>
            <em>Latest Comments</em>
        </p>

        <div class="bk-sml">
            <i class="fa fa-clock-o"></i> just now
        </div>
        <p>
            Project X version 2.2.3 is now live!
        </p>

        <hr class="bk-hr-white bk-mg-t-5 bk-mg-b-5 bk-opacity-2">

        <div class="bk-sml">
            <i class="fa fa-clock-o"></i> 36' ago
        </div>
        <p>
            Finalizing Project X version 2.2.3 on the live server - tests are looking ok.
        </p>

        <hr class="bk-hr-white bk-mg-t-5 bk-mg-b-5 bk-opacity-2">

        <div class="bk-sml">
            <i class="fa fa-clock-o"></i> 1h45' ago
        </div>
        <p>
            Project X version 2.2.3 is now live!
        </p>

    </div>
</div>

SET VII

Avenue Anspach 520

1000 BRUXELLES

Our head office:

Avenue Anspach 520

1000 BRUXELLES
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-danger text-center bk-pd-off">
        <div id="js-gmap-marker" class="bk-rd-t" style="height: 240px;"></div>
    </div>
    <div class="panel-body bk-bg-danger bk-pd-off-t bk-pd-off-b">
        <div class="row bk-fg-white">
            <div class="col-xs-8 bk-vcenter bk-pd-15">
                <h4 class="bk-mg-off bk-300">Avenue Anspach 520</h4>
                <h3 class="bk-mg-off bk-700">1000 BRUXELLES</h3>
            </div>
            <div class="col-xs-4 text-right bk-vcenter bk-pd-15">
                <i class="fa fa-map-marker fa-3x"></i>
            </div>
        </div>
    </div>
</div>

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-info bk-pd-off-t bk-pd-off-b">
        <div class="row bk-fg-white">
            <div class="col-xs-4 text-center bk-vcenter bk-pd-15">
                <i class="fa fa-map-marker fa-3x"></i>
            </div>
            <div class="col-xs-8 bk-vcenter bk-pd-15">
                <h4 class="bk-mg-off bk-700 text-uppercase">Avenue Anspach 520</h4>
                <h5 class="bk-mg-off bk-300">1000 BRUXELLES</h5>
            </div>
        </div>
    </div>
    <div class="panel-body bk-bg-danger text-center bk-pd-off">
        <div id="js-gmap-marker2" class="bk-rd-b" style="height: 240px;"></div>
    </div>
</div>

SET VIII

<div class="panel-group hidden-xs" id="accordionB1" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default bk-widget bk-bd-off bk-box-shadow-off bk-rd-off">
        <h4 class="bk-mg-off" role="tab" id="headingB1">
            <a data-toggle="collapse" data-parent="#accordionB1" href="#collapseB1" aria-expanded="true" aria-controls="collapseB1"
               class="panel-heading bk-block bk-bg-primary bk-bg-darken bk-fg-white bk-300 bk-rd-off">
                Project X-ray
            </a>
        </h4>

        <div id="collapseB1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingB1">
            <a class="panel-body bk-bg-white bk-bg-lighten bk-fg-primary bk-fg-darken">
                <div class="pull-left bk-mg-r-10">
                    <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-primary bk-fg-white">
                        <i class="fa fa-umbrella fa-2x"></i>
                    </div>
                </div>
                <p class="bk-mg-off-b">
                    The C# development team has completed their last sprint for their project and are celebrating with some champagne! Join them on floor 3
                    in the dining hall.
                </p>
            </a>
        </div>
    </div>

    <div class="panel panel-default bk-widget bk-bd-off bk-box-shadow-off bk-rd-off">
        <h4 class="bk-mg-off" role="tab" id="headingB2">
            <a data-toggle="collapse" data-parent="#accordionB1" href="#collapseB2" aria-expanded="false" aria-controls="collapseB2"
               class="collapsed panel-heading bk-block bk-bg-warning bk-bg-darken bk-fg-white bk-300 bk-rd-off">
                Project Yankee
            </a>
        </h4>

        <div id="collapseB2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingB2">
            <a class="panel-body bk-bg-white bk-bg-lighten bk-fg-warning bk-fg-darken">
                <div class="pull-left bk-mg-r-10">
                    <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-warning bk-fg-white">
                        <i class="fa fa-umbrella fa-2x"></i>
                    </div>
                </div>
                <p class="bk-mg-off-b">
                    Read all about progress on our projects and new partnerships that will increase our business potential.
                </p>
            </a>
        </div>
    </div>

    <div class="panel panel-default bk-widget bk-bd-off bk-box-shadow-off bk-rd-off">
        <h4 class="bk-mg-off" role="tab" id="headingB3">
            <a data-toggle="collapse" data-parent="#accordionB1" href="#collapseB3" aria-expanded="false" aria-controls="collapseB3"
               class="collapsed panel-heading bk-block bk-bg-gray bk-bg-darken bk-fg-white bk-300 bk-rd-off">
                Project zulu
            </a>
        </h4>

        <div id="collapseB3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingB3">
            <a class="panel-body bk-bg-white bk-bg-lighten bk-fg-gray bk-fg-darken">
                <div class="pull-left bk-mg-r-10">
                    <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-gray bk-fg-white">
                        <i class="fa fa-umbrella fa-2x"></i>
                    </div>
                </div>
                <p class="bk-mg-off-b">
                    Our dashboard has been updated to have better access and to allow on the fly editing. Read more about it on
                    our daily mailing journal and do not hesitate to let us know what you think.
                </p>
            </a>
        </div>
    </div>

</div>

SET IX

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-bg-primary bk-bg-darken bk-fg-white text-center bk-pd-t-30 bk-pd-b-30">
        <h1 class="bk-mg-off-t bk-700"> -2</h1>
        <i class="wi wi-day-lightning fa-5x bk-pd-t-20 bk-pd-b-20"></i>
        <h3 class="bk-mg-off bk-300">HELSINKI</h3>
    </a>
</div>

SET X

<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-4 bk-bg-facebook bk-pd-15 bk-fg-white bk-rd-l bk-opacity-inv">
                <i class="fa fa-facebook fa-3x bk-pd-t-15"></i><br>
                Like
            </a>
            <a href="javascript:" class="col-xs-4 bk-bg-twitter bk-pd-15 bk-fg-white bk-opacity-inv">
                <i class="fa fa-twitter fa-3x bk-pd-t-15"></i><br>
                Tweet
            </a>
            <a href="javascript:" class="col-xs-4 bk-bg-google-plus bk-pd-15 bk-fg-white bk-rd-r bk-opacity-inv">
                <i class="fa fa-google-plus fa-3x bk-pd-t-15"></i><br>
                Share
            </a>
        </div>
    </div>
</div>

<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-4 bk-bg-white bk-bg-darken bk-pd-15 bk-fg-facebook bk-rd-l">
                <i class="fa fa-facebook fa-3x bk-pd-t-15"></i><br>
                Like
            </a>
            <a href="javascript:" class="col-xs-4 bk-bg-white bk-bg-darken bk-pd-15 bk-fg-twitter">
                <i class="fa fa-twitter fa-3x bk-pd-t-15"></i><br>
                Tweet
            </a>
            <a href="javascript:" class="col-xs-4 bk-bg-white bk-bg-darken bk-pd-15 bk-fg-google-plus bk-rd-r">
                <i class="fa fa-google-plus fa-3x bk-pd-t-15"></i><br>
                Share
            </a>
        </div>
    </div>
</div>