BootKit home · Manual home

LIGHT WIDGETS


Set I

9,655

NEW PROSPECTS

This week

77,563

MONTHLY PAYOUTS

Today

ORDERS

628

This week

563

USERS ONLINE
10:45 AM

461

UPLOADS

Account total

19,657

Prospects

This month

OUTAGES

2

This week

101

RESERVATIONS
10:45 AM
<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-bg-white bk-fg-primary">
        <div class="clearfix">
            <div class="pull-left bk-mg-r-15">
                <i class="fa fa-users fa-3x"></i>
            </div>
            <h2 class="bk-mg-off-t bk-700">9,655</h2>
        </div>
        <h4 class="bk-mg-off-b bk-300">NEW PROSPECTS</h4>
        <small>This week</small>
    </div>
</div>

Set II

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-bg-white bk-fg-primary bk-fg-darken bk-pd-off">
        <div class="row bk-tbl">
            <div class="col-xs-4 bk-pd-15">
                <span class="bk-icon bk-icon-2x bk-round bk-bg-primary bk-bg-darken bk-fg-white bk-bd-off">
                    <i class="fa fa-share-alt fa-2x"></i>
                </span>
            </div>
            <div class="col-xs-8 bk-pd-15 text-right">
                <h2 class="bk-mg-off bk-300">2,568</h2>
                <span class="bk-sml bk-fg-gray bk-fg-darken">CONNECTIONS</span>
            </div>
        </div>
    </a>
</div>

Set III

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-bg-white bk-bg-darken bk-fg-primary bk-fg-darken">
        <div class="row">
            <div class="col-xs-8">
                <h3 class="bk-300 bk-mg-off">GOALS</h3>
                <span class="bk-700">
                    Today
                </span>
            </div>
            <div class="col-xs-4">
                <span class="bk-icon bk-icon-24 bk-round bk-bg-primary bk-bg-darken bk-fg-white bk-bd-off pull-right">
                    <i class="fa fa-line-chart"></i>
                </span>
            </div>
        </div>

        <div class="progress bk-rd-off bk-progress-xs bk-mg-t-15 bk-mg-off-b">
            <div class="progress-bar bk-bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                <span class="sr-only">60% Complete</span>
            </div>
        </div>

        <div class="bk-mg-off-b bk-mg-t-10">
            60% complete
        </div>
    </a>
</div>

Variations

Inverse background + no radius

Static background + darken text

Static background + lighten text

SET IV

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body bk-bg-white bk-fg-primary bk-fg-darken bk-ltr">
        <div class="row">
            <div class="col-xs-9 bk-vcenter bk-pd-15 bk-pd-off-b">
                <div class="bk-sml">Server info</div>
                <h4 class="bk-mg-off-t bk-700">ALPHA SERVER</h4>
            </div>
            <div class="col-xs-3 bk-vcenter bk-pd-15 bk-pd-off-b text-right">
                <i class="fa fa-area-chart fa-2x"></i>
            </div>
        </div>

        <hr class="bk-hr-primary bk-mg-off-t bk-mg-b-10 bk-opacity-4">

        <div class="bk-pd-15 bk-pd-off-t">
            <div class="row">
                <div class="col-xs-7">
                    <div class="bk-mg-b-5"><i class="fa fa-plug"></i> ONLINE</div>
                    <div class="bk-mg-b-5"><i class="fa fa-folder-o"></i> DISK SPACE</div>
                    <div><i class="fa fa-database"></i> DATABASES</div>
                </div>
                <div class="col-xs-5 text-right">
                    <div class="bk-mg-b-5">122 days</div>
                    <div class="bk-mg-b-5">free: 85%</div>
                    <div>load: 44%</div>
                </div>
            </div>
        </div>
    </a>
</div>

Variations

SET V

Srinivas Tamada

Senior Developer

Chelsea Otakan

HR Consultant

Chris Pearson

Support Analyst

Ghaida Zahran

Management Director

Srinivas Tamada

Senior Developer

Chelsea Otakan

HR Consultant
<div class="panel bk-widget bk-bd-off bk-rd-off">
    <div class="panel-body bk-bg-white bk-fg-primary 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-80 bk-bd-info bk-bd-3x">
        </div>
    </div>
</div>

SET VI

Visits in percentage by country

United States 46% DOWN 3%
Great Britain 15% UP 4%
Germany 15% UP 7%
India 14% DOWN 2%
Canada 13% UP 4%
Mexico 8% DOWN 5%

Top 5 importing countries

United States
60,421 tons
Great Britain
38,729 tons
Canada
34,796 tons
Germany
27,329 tons
India
12,160 tons
<div class="panel bk-widget bk-bd-off bk-rd-off bk-box-shadow-off">
    <div class="panel-body bk-bg-white bk-pd-b-5">
        <h4 class="bk-mg-off-t">Visits in percentage by country</h4>
        <table class="table bk-mg-off-b">
            <tbody>
            <tr class="bk-fg-danger">
                <td class="bk-pd-off-l">United States</td>
                <td class="bk-700 text-right">46%</td>
                <td class="text-right">DOWN 3%</td>
            </tr>
            <tr class="bk-fg-success">
                <td class="bk-pd-off-l">Great Britain</td>
                <td class="bk-700 text-right">15%</td>
                <td class="text-right">UP 4%</td>
            </tr>
            <tr class="bk-fg-success">
                <td class="bk-pd-off-l">Germany</td>
                <td class="bk-700 text-right">15%</td>
                <td class="text-right">UP 7%</td>
            </tr>
            <tr class="bk-fg-danger">
                <td class="bk-pd-off-l">India</td>
                <td class="bk-700 text-right">14%</td>
                <td class="text-right">DOWN 2%</td>
            </tr>
            <tr class="bk-fg-success">
                <td class="bk-pd-off-l">Canada</td>
                <td class="bk-700 text-right">13%</td>
                <td class="text-right">UP 4%</td>
            </tr>
            <tr class="bk-fg-danger">
                <td class="bk-pd-off-l">Mexico</td>
                <td class="bk-700 text-right">8%</td>
                <td class="text-right">DOWN 5%</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="panel bk-widget bk-bd-off bk-rd-off bk-box-shadow-off">
    <div class="panel-body bk-bg-white bk-pd-b-5">
        <h4 class="bk-mg-off-t">Top 5 importing countries</h4>
        <table class="table bk-mg-off-b">
            <tbody>
            <tr class="bk-fg-success">
                <td class="bk-pd-off-l">United States</td>
                <td class="bk-700 text-right">
                    <div class="bar-sparkline" sparktype="bar" sparkbarcolor="#87CC64" sparkheight="30" sparkbarwidth="4" sparkbarspacing="3">
                        <!-- 282,155,406,120,135,201,174,295,104,67,151,125 -->
                    </div>
                </td>
                <td class="text-right">
                    <i class="fa fa-cubes"></i> 60,421 tons
                </td>
            </tr>
            <tr class="bk-fg-danger">
                <td class="bk-pd-off-l">Great Britain</td>
                <td class="bk-700 text-right">
                    <div class="bar-sparkline" sparktype="bar" sparkbarcolor="#F78852" sparkheight="30" sparkbarwidth="4" sparkbarspacing="3">
                        <!-- 295,104,65,115,182,298,145,185,122,69,118,106 -->
                    </div>
                </td>
                <td class="text-right">
                    <i class="fa fa-cubes"></i> 38,729 tons
                </td>
            </tr>
            <tr class="bk-fg-primary">
                <td class="bk-pd-off-l">Canada</td>
                <td class="bk-700 text-right">
                    <div class="bar-sparkline" sparktype="bar" sparkbarcolor="#5EABF4" sparkheight="30" sparkbarwidth="4" sparkbarspacing="3">
                        <!-- 295,57,183,155,153,215,295,105,67,119,162,183 -->
                    </div>
                </td>
                <td class="text-right">
                    <i class="fa fa-cubes"></i> 34,796 tons
                </td>
            </tr>
            <tr class="bk-fg-info">
                <td class="bk-pd-off-l">Germany</td>
                <td class="bk-700 text-right">
                    <div class="bar-sparkline" sparktype="bar" sparkbarcolor="#57D9CA" sparkheight="30" sparkbarwidth="4" sparkbarspacing="3">
                        <!-- 122,75,158,86,187,197,92,136,231,160,105,112 -->
                    </div>
                </td>
                <td class="text-right">
                    <i class="fa fa-cubes"></i> 27,329 tons
                </td>
            </tr>
            <tr class="bk-fg-warning">
                <td class="bk-pd-off-l">India</td>
                <td class="bk-700 text-right">
                    <div class="bar-sparkline" sparktype="bar" sparkbarcolor="#F8C556" sparkheight="30" sparkbarwidth="4" sparkbarspacing="3">
                        <!-- 167,227,85,138,120,208,215,75,168,152,145,295 -->
                    </div>
                </td>
                <td class="text-right">
                    <i class="fa fa-cubes"></i> 12,160 tons
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

SET VII

<div class="panel bk-widget bk-bd-off bk-box-shadow-off bk-rd-off">
    <div class="panel-heading bk-bg-white clearfix bk-rd-off">
        <h3 class="pull-left bk-mg-b-5 bk-mg-t-5">Latest news</h3>
        <div class="pull-right">
            <i class="fa fa-newspaper-o fa-2x bk-pd-t-5"></i>
        </div>
    </div>
    <div class="bk-scroll">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-danger bk-fg-darken">
            <div class="pull-left bk-mg-r-10">
                <div class="bk-round bk-bd-off bk-bg-darken bk-icon bk-icon-2x bk-icon-default bk-bg-danger bk-fg-white">
                    <i class="fa fa-cogs 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>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-primary bk-fg-darken">
            <div class="pull-left bk-mg-r-10">
                <div class="bk-round bk-bd-off bk-bg-darken bk-icon bk-icon-2x bk-icon-default bk-bg-primary bk-fg-white">
                    <i class="fa fa-comment fa-2x"></i>
                </div>
            </div>
            <p class="bk-mg-off-b">
                Chris Pearson wrote a new blog post outlining his latest insights on mobile development. Very interesting for
                all of you developers out there as you all joined in with your ideas.
            </p>
        </a>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray 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-send-o 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>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-info 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-info 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>
        <hr class="bk-hr-white bk-mg-off">
        <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-success 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-success 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.<br>
                Our board is excited to announce that bonuses will be paid out as promised! We've had a great year and now it is time to reap the rewards.
            </p>
        </a>
    </div>
    <div class="panel-footer bk-bg-white bk-bd-off bk-rd-off">
        <a href="javascript:" class="btn btn-default btn-sm bk-rd-off">Visit news section</a>
    </div>
</div>

SET VIII

<div class="panel bk-widget bk-bd-off bk-rd-off">
    <div class="panel-body bk-bg-white text-center bk-pd-t-10 bk-pd-b-10 bk-pd-off-r bk-pd-off-l">
        <div class="row bk-tbl">
            <div class="col-xs-8 text-left">
                <h4 class="bk-mg-off"><i class="fa fa-list-alt"></i> GROUP MEMBERS</h4>
            </div>
            <div class="col-xs-4 text-right">
                <a href="#group-members" role="button" data-slide="next" class="bk-custom-ctrl pull-right">
                    <i class="fa fa-angle-right"></i>
                </a>

                <a href="#group-members" role="button" data-slide="prev" class="bk-custom-ctrl pull-right bk-mg-r-5">
                    <i class="fa fa-angle-left"></i>
                </a>
            </div>
        </div>
    </div>

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

    <div id="group-members" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t bk-fg-danger bk-fg-darken text-center">
                    <h4 class="bk-mg-off-b">Srinivas Tamada</h4>
                    <p class="bk-fg-gray">LEAD DEVELOPER</p>
                    <div class="bk-avatar">
                        <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-120 bk-bd-5x bk-bd-danger">
                    </div>
                </a>
            </div>
            <div class="item">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t bk-fg-info bk-fg-darken text-center">
                    <h4 class="bk-mg-off-b">Chelsea Otakan</h4>
                    <p class="bk-fg-gray">TEAM LEADER</p>
                    <div class="bk-avatar">
                        <img src="img/face/chelsea-128.jpg" alt="" class="img-circle bk-img-120 bk-bd-5x bk-bd-info">
                    </div>
                </a>
            </div>
            <div class="item">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t bk-fg-success bk-fg-darken text-center">
                    <h4 class="bk-mg-off-b">Ghaida Zahran</h4>
                    <p class="bk-fg-gray">SCRUM MASTER</p>
                    <div class="bk-avatar">
                        <img src="img/face/ghaida-128.jpg" alt="" class="img-circle bk-img-120 bk-bd-5x bk-bd-success">
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="panel-body bk-bg-white">
        <a href="javascript:" class="btn btn-block btn-default bk-rd-off">view all</a>
    </div>
</div>

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

    <div id="countries" class="carousel bk-fade" data-ride="carousel">
        <div class="carousel-inner">

            <div class="item active">
                <div class="panel-body bk-bg-white">
                    <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> BRUSSELS <small>(GMT +1)</small></h4>
                </div>
                <hr class="bk-mg-off">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-gray text-center">
                    <h4 class="bk-700">Temp day: 5°C</h4>
                    <h4 class="bk-700">Temp night: 1°C</h4>
                    <div class="bk-pd-15 bk-fg-primary">
                        <i class="wi wi-day-cloudy fa-5x bk-pd-t-15"></i>
                    </div>
                </a>
                <hr class="bk-mg-off">

                <div class="panel-body bk-pd-off">
                    <div class="row">
                        <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="prev">
                            <small><i class="fa fa-angle-left"></i> Los angeles</small>
                        </a>
                        <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="next">
                            <small>New York <i class="fa fa-angle-right"></i></small>
                        </a>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="panel-body bk-bg-white">
                    <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> NEW YORK <small>(EST)</small></h4>
                </div>
                <hr class="bk-mg-off">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-gray text-center">
                    <h4 class="bk-700">Temp day: -2°C</h4>
                    <h4 class="bk-700">Temp night: -12°C</h4>
                    <div class="bk-pd-15 bk-fg-info">
                        <i class="wi wi-day-snow-wind fa-5x bk-pd-t-15"></i>
                    </div>
                </a>
                <hr class="bk-mg-off">

                <div class="panel-body bk-pd-off">
                    <div class="row">
                        <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="prev">
                            <small><i class="fa fa-angle-left"></i> Brussels</small>
                        </a>
                        <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="next">
                            <small>Melbourne <i class="fa fa-angle-right"></i></small>
                        </a>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="panel-body bk-bg-white">
                    <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> MELBOURNE <small>(AEST)</small></h4>
                </div>
                <hr class="bk-mg-off">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-gray text-center">
                    <h4 class="bk-700">Temp day: 32°C</h4>
                    <h4 class="bk-700">Temp night: 24°C</h4>
                    <div class="bk-pd-15 bk-fg-warning">
                        <i class="wi wi-day-sunny-overcast fa-5x bk-pd-t-15"></i>
                    </div>
                </a>
                <hr class="bk-mg-off">

                <div class="panel-body bk-pd-off">
                    <div class="row">
                        <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="prev">
                            <small><i class="fa fa-angle-left"></i> New York</small>
                        </a>
                        <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="next">
                            <small>Tokyo <i class="fa fa-angle-right"></i></small>
                        </a>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="panel-body bk-bg-white">
                    <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> TOKYO <small>(JST)</small></h4>
                </div>
                <hr class="bk-mg-off">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-gray text-center">
                    <h4 class="bk-700">Temp day: 14°C</h4>
                    <h4 class="bk-700">Temp night: 5°C</h4>
                    <div class="bk-pd-15 bk-fg-primary">
                        <i class="wi wi-day-cloudy fa-5x bk-pd-t-15"></i>
                    </div>
                </a>
                <hr class="bk-mg-off">

                <div class="panel-body bk-pd-off">
                    <div class="row">
                        <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="prev">
                            <small><i class="fa fa-angle-left"></i> Melbourne</small>
                        </a>
                        <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="next">
                            <small>Los Angeles <i class="fa fa-angle-right"></i></small>
                        </a>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="panel-body bk-bg-white">
                    <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> LOS ANGELES <small>(PDT)</small></h4>
                </div>
                <hr class="bk-mg-off">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-gray text-center">
                    <h4 class="bk-700">Temp day: 22°C</h4>
                    <h4 class="bk-700">Temp night: 14°C</h4>
                    <div class="bk-pd-15 bk-fg-warning">
                        <i class="wi wi-day-sunny fa-5x bk-pd-t-15"></i>
                    </div>
                </a>
                <hr class="bk-mg-off">

                <div class="panel-body bk-pd-off">
                    <div class="row">
                        <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="prev">
                            <small><i class="fa fa-angle-left"></i> Tokyo</small>
                        </a>
                        <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="next">
                            <small>Brussels <i class="fa fa-angle-right"></i></small>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

SET IX

STARS

5,685

FLAGS

1,269


SHARED

18,474

COMMENTS

86,910

SALES

7,922

DRINKS

7,838


EVENTS

561

PARTS

166

<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">
                <div class="row bk-tbl">
                    <div class="col-xs-4 bk-pd-off">
                        <i class="fa fa-star fa-2x bk-pd-t-5 bk-fg-warning"></i>
                    </div>
                    <div class="col-xs-8">
                        <h5 class="bk-mg-off-t">STARS</h5>
                        <h4 class="bk-mg-off bk-fg-gray"><strong>5,685</strong></h4>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 bk-pd-15 bk-rd-t-r">
                <div class="row bk-tbl">
                    <div class="col-xs-4 bk-pd-off">
                        <i class="fa fa-flag fa-2x bk-pd-t-5 bk-fg-success"></i>
                    </div>
                    <div class="col-xs-8">
                        <h5 class="bk-mg-off-t">FLAGS</h5>
                        <h4 class="bk-mg-off bk-fg-gray"><strong>1,269</strong></h4>
                    </div>
                </div>
            </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">
                <div class="row bk-tbl">
                    <div class="col-xs-4 bk-pd-off">
                        <i class="fa fa-share-alt fa-2x bk-pd-t-5 bk-fg-danger"></i>
                    </div>
                    <div class="col-xs-8">
                        <h5 class="bk-mg-off-t">SHARED</h5>
                        <h4 class="bk-mg-off bk-fg-gray"><strong>18,474</strong></h4>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 bk-pd-15 bk-rd-t-r">
                <div class="row bk-tbl">
                    <div class="col-xs-4 bk-pd-off">
                        <i class="fa fa-comments fa-2x bk-pd-t-5 bk-fg-info"></i>
                    </div>
                    <div class="col-xs-8">
                        <h5 class="bk-mg-off-t">COMMENTS</h5>
                        <h4 class="bk-mg-off bk-fg-gray"><strong>86,910</strong></h4>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

SET X

<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-white">
        <h3 class="bk-mg-off bk-fg-primary"><strong>Chris Pearson</strong></h3>
        <small class="bk-fg-inverse">SUPPORT ANALYST</small>
        <ul class="list-inline list-unstyled bk-mg-off-b bk-mg-t-5">
            <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 class="panel-body bk-pd-off-b bk-pd-off-t">
        <div class="row text-center">
            <a class="col-xs-4 bk-bg-very-light-gray bk-bg-lighten bk-fg-primary bk-fg-darken bk-700 bk-pd-t-10 bk-pd-b-10">
                <small>TODO</small>
                <h4 class="bk-300 bk-mg-off-b">852</h4>
            </a>
            <a class="col-xs-4 bk-bg-very-light-gray bk-bg-lighten bk-fg-primary bk-fg-darken bk-700 bk-pd-t-10 bk-pd-b-10">
                <small>PROCESSED</small>
                <h4 class="bk-300 bk-mg-off-b">366</h4>
            </a>
            <a class="col-xs-4 bk-bg-very-light-gray bk-bg-lighten bk-fg-primary bk-fg-darken bk-700 bk-pd-t-10 bk-pd-b-10">
                <small>ESCALATED</small>
                <h4 class="bk-300 bk-mg-off-b">901</h4>
            </a>
        </div>
    </div>
</div>