BootKit home · Manual home

AVATARS

Avatars are user images that can be styled in various ways. they can also be used in various complex setups.


Available classes

Example

The wrapping element (div) must have the bk-avatar class and the image itself receives specific configuration classes like img-circle and bk-img-80.

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-80">
</div>

Sizing

bk-img-40

bk-img-60

bk-img-80

bk-img-100

bk-img-120

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-40">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-60">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-80">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-100">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-img-120">
</div>

Borders

1 pixel (no extra class needed)

2 pixels bk-bd-2x

3 pixels bk-bd-3x

4 pixels bk-bd-4x

5 pixels bk-bd-5x

1x double border with 4px spacing bk-bd-db-danger

3x double border with 4px spacing bk-bd-db-danger

More color and thickness combos are possible!

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-bd-danger bk-img-80">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-bd-danger bk-bd-2x bk-img-80">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-bd-danger bk-bd-3x bk-img-80">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-bd-danger bk-bd-4x bk-img-80">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-bd-danger bk-bd-5x bk-img-80">
</div>

Bordered avatars with links

Darken

Lighten

<a href="javascript:" class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-bd-danger bk-bd-5x bk-bd-darken bk-img-80">
</a>

<a href="javascript:" class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-bd-danger bk-bd-5x bk-bd-lighten bk-img-80">
</a>

Applying box shadows

bk-box-shadow

bk-box-shadow-l

bk-box-shadow-t

bk-box-shadow-r

bk-box-shadow-b

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-box-shadow bk-img-80">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-box-shadow-l bk-img-80">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-box-shadow-t bk-img-80">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-box-shadow-r bk-img-80">
</div>

<div class="bk-avatar">
    <img src="img/face/srinivas-128.jpg" alt="" class="img-circle bk-box-shadow-b bk-img-80">
</div>

By combining hover effects with box shadows bk-box-shadow we can achieve some special effects:

<div class="panel bk-widget bk-bd-off">
    <a class="panel-body bk-bg-success bk-bg-lighten text-center">
        <div class="bk-avatar">
            <img src="img/face/ghaida-128.jpg" alt="" class="img-circle bk-img-120 bk-bd-success bk-bd-darken bk-bd-3x bk-box-shadow">
        </div>
    </a>
</div>

<div class="panel bk-widget bk-bd-off">
    <a class="panel-body bk-bg-success bk-bg-darken text-center">
        <div class="bk-avatar">
            <img src="img/face/ghaida-128.jpg" alt="" class="img-circle bk-img-120 bk-bd-success bk-bd-lighten bk-bd-3x bk-box-shadow">
        </div>
    </a>
</div>

<div class="panel bk-widget bk-bd-off">
    <a class="panel-body bk-bg-success bk-bg-darken text-center">
        <div class="bk-avatar">
            <img src="img/face/ghaida-128.jpg" alt="" class="img-circle bk-img-120 bk-bd-success bk-bd-3x bk-box-shadow">
        </div>
    </a>
</div>

<div class="panel bk-widget bk-bd-off">
    <a class="panel-body bk-bg-success bk-bg-lighten text-center">
        <div class="bk-avatar">
            <img src="img/face/ghaida-128.jpg" alt="" class="img-circle bk-img-120 bk-bd-success bk-bd-3x bk-box-shadow">
        </div>
    </a>
</div>

Centered inside panel

By applying the class bk-avatar100-hcenter we can align our avatar horizontally inside a widget. Note that this class is added to the wrapper element, not the image itself.

<div class="bk-vcenter"></div> is used inside the wrapping element before the image itself to provide a way to vertically center the element.

<div class="panel bk-widget bk-bd-off">
    <a href="javascript:" class="panel-body text-center bk-pd-off bk-opacity-inv bk-wrapper">
        <div class="bk-avatar bk-avatar100-hcenter">
            <div class="bk-vcenter"></div>
            <img src="img/face/chelsea-128.jpg" alt="" class="img-circle bk-img-100 bk-bd-danger bk-bd-darken bk-bd-4x">
        </div>
        <div class="bk-img-radius"><img src="img/desk.jpg" class="img-responsive"></div>
    </a>
</div>

Halfdown avatars

This is the name for avatars that hang in between a background image and a second panel body.

First of all, add bk-wrapper to the panel body that will contain the avatar to make sure absolute positioning is related to the correct parent: this class adds position: relative to the panel body in question.
Halfdown configs are only available for 80x80, 100x100 and 120x120 pixel avatars.
The top image size has no influence on the position of the avatar: it will always remain exactly on the border of the 2 panel bodies.

- The example below describes a config where a 120x120 avatar is used.
- We always use 2 panel bodies: one will contain the top image and the avatar whilst the second one will be pushed down a bit and will hold text data.
- bk-avatar120-halfdown is added to the wrapping element (where bk-avatar is added). As in this case the avatar has 120 pixel width and height dimensions.
- The avatar has a link with unique border styling and hover effect (could come in handy to visit the user profile for example).
- bk-avatar120-halfdown-after must be added to the second panel-body to push down content within.

Chris Pearson

SUPPORT ANALYST

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

Chelsea Otakan

HR MANAGER

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

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body text-center bk-pd-off bk-wrapper">
        <img src="img/flat-landscape.jpg" class="img-responsive bk-rd-t">
        <div class="bk-avatar bk-avatar120-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-120 bk-bd-white bk-bd-darken bk-bd-3x">
            </a>
        </div>
    </div>
    <div class="panel-body bk-pd-b-10 bk-avatar120-halfdown-after text-center bk-bg-white">
        <h3 class="bk-mg-off"><strong>Chris Pearson</strong></h3>
        <small>SUPPORT ANALYST</small>
        <p class="bk-mg-off-b">
            Curabitur nisi ipsum, accumsan id urna facilisis, commodo tempus turpis. Mauris lobortis elit eget bibendum
            ultrices.
        </p>
    </div>
</div>

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body text-center bk-pd-off bk-wrapper">
        <img src="img/oriental-night.jpg" class="img-responsive bk-rd-t">
        <div class="bk-avatar bk-avatar80-halfdown">
            <div class="bk-vcenter"></div>
            <a href="javascript:" class="bk-fg-danger bk-fg-darken">
                <img src="img/face/chelsea-128.jpg" alt="" class="img-circle bk-img-80 bk-bd-white bk-bd-darken bk-bd-3x">
            </a>
        </div>
    </div>
    <div class="panel-body bk-pd-b-10 bk-avatar80-halfdown-after text-center bk-bg-white">
        <h3 class="bk-mg-off"><strong>Chelsea Otakan</strong></h3>
        <small>HR MANAGER</small>
        <p class="bk-mg-off-b">
            Curabitur nisi ipsum, accumsan id urna facilisis, commodo tempus turpis. Mauris lobortis elit eget bibendum
            ultrices.
        </p>
    </div>
</div>