Avatar

Geeks Only

Cool avatars with different shapes, sizes and with the possibility to group them.

Avatars

Use avatar sizing via class on avatar-* xxl, xl, lg, md, sm, xs

Design
HTML

<span class="avatar avatar-xxl">
                                                            <img src="../assets/images/avatar-1.jpg" alt="" class="rounded-circle" />
                                                        </span>
                                                        <span class="avatar avatar-xl">
                                                            <img src="../assets/images/avatar-1.jpg" alt="" class="rounded-circle" />
                                                        </span>
                                                        <span class="avatar avatar-lg">
                                                            <img src="../assets/images/avatar-1.jpg" alt="" class="rounded-circle" />
                                                        </span>
                                                        <span class="avatar avatar-md">
                                                            <img src="../assets/images/avatar-1.jpg" alt="" class="rounded-circle" />
                                                        </span>
                                                        <span class="avatar avatar-sm">
                                                            <img src="../assets/images/avatar-1.jpg" alt="" class="rounded-circle" />
                                                        </span>
                                                        <span class="avatar avatar-xs">
                                                            <img src="../assets/images/avatar-1.jpg" alt="" class="rounded-circle" />
                                                        </span>

Initials

You won't always have an image for every user, so easily use initials instead.

Design
HTML

GK GK GK GK GK GK

<span class="avatar avatar-xxl avatar-primary">
                                                            <span class="avatar-initials rounded-circle">GK</span>
                                                        </span>
                                                        <span class="avatar avatar-xl avatar-primary">
                                                            <span class="avatar-initials rounded-circle">GK</span>
                                                        </span>
                                                        <span class="avatar avatar-lg avatar-primary">
                                                            <span class="avatar-initials rounded-circle">GK</span>
                                                        </span>
                                                        <span class="avatar avatar-md avatar-primary">
                                                            <span class="avatar-initials rounded-circle">GK</span>
                                                        </span>
                                                        <span class="avatar avatar-sm avatar-primary">
                                                            <span class="avatar-initials rounded-circle">GK</span>
                                                        </span>
                                                        <span class="avatar avatar-xs avatar-primary">
                                                            <span class="avatar-initials rounded-circle">GK</span>
                                                        </span>

Status Indicator

Use .avatar-indicators class on div.avatar element

Design
HTML

<span class="avatar avatar-xxl avatar-indicators avatar-online">
                                                            <img alt="avatar" src="../assets/images/avatar-1.jpg" class="rounded-circle" />
                                                        </span>
                                                        <span class="avatar avatar-xl avatar-indicators avatar-away">
                                                            <img alt="avatar" src="../assets/images/avatar-1.jpg" class="rounded-circle" />
                                                        </span>
                                                        <span class="avatar avatar-lg avatar-indicators avatar-offline">
                                                            <img alt="avatar" src="../assets/images/avatar-1.jpg" class="rounded-circle" />
                                                        </span>
                                                        <span class="avatar avatar-md avatar-indicators avatar-online">
                                                            <img alt="avatar" src="../assets/images/avatar-1.jpg" class="rounded-circle" />
                                                        </span>
                                                        <span class="avatar avatar-sm avatar-indicators avatar-away">
                                                            <img alt="avatar" src="../assets/images/avatar-1.jpg" class="rounded-circle" />
                                                        </span>
                                                        <span class="avatar avatar-xs avatar-indicators avatar-online">
                                                            <img alt="avatar" src="../assets/images/avatar-1.jpg" class="rounded-circle" />
                                                        </span>

Groups

Use div with .avatar-group class and put span.avatar inside it.

Design
HTML

GK GK GK GK

<div class="d-lg-flex">
                                                            <div class="avatar-group mr-5">
                                                                <span class="avatar avatar-lg">
                                                                    <img alt="avatar" src="../assets/images/avatar-1.jpg" class="rounded-circle" />
                                                                </span>
                                                                <span class="avatar avatar-lg">
                                                                    <img alt="avatar" src="../assets/images/avatar-2.jpg" class="rounded-circle" />
                                                                </span>
                                                                <span class="avatar avatar-lg">
                                                                    <img alt="avatar" src="../assets/images/avatar-3.jpg" class="rounded-circle" />
                                                                </span>
                                                                <span class="avatar avatar-lg">
                                                                    <img alt="avatar" src="../assets/images/avatar-4.jpg" class="rounded-circle" />
                                                                </span>
                                                            </div>
                                                         <div class="avatar-group">
                                                                <span class="avatar avatar-lg avatar-primary">
                                                                    <span class="avatar-initials rounded-circle">GK</span>
                                                                </span>
                                                                <span class="avatar avatar-lg avatar-warning">
                                                                    <span class="avatar-initials rounded-circle">GK</span>
                                                                </span>
                                                                <span class="avatar avatar-lg avatar-success">
                                                                    <span class="avatar-initials rounded-circle">GK</span>
                                                                </span>
                                                                <span class="avatar avatar-lg avatar-info">
                                                                    <span class="avatar-initials rounded-circle">GK</span>
                                                                </span>
                                                            </div>
                                                        </div>

Shape

Use .rounded and .rounded-circle class to make avatar rounded and circlular respectively.

Design
HTML

GK GK

<div class="d-lg-flex">
                                                            <div class="mr-4">
                                                                <span class="avatar avatar-lg mr-2">
                                                                    <img alt="avatar" src="../assets/images/avatar-1.jpg" class="rounded" />
                                                                </span>
                                                                <span class="avatar avatar-lg">
                                                                    <img alt="avatar" src="../assets/images/avatar-2.jpg" class="rounded-circle" />
                                                                </span>
                                                            </div>
                                                            <div>
                                                                <span class="avatar avatar-lg avatar-primary">
                                                                    <span class="avatar-initials rounded">GK</span>
                                                                </span>
                                                                <span class="avatar avatar-lg avatar-warning">
                                                                    <span class="avatar-initials rounded-circle">GK</span>
                                                                </span>
                                                            </div>
                                                        </div>

Ratio

For using 4:3 ratio size between the width and the height add class .img-4by3 modifier class.

Design
HTML

<span>
                                                            <img src="../assets/images/4by3.jpg" alt="" class="rounded img-4by3-xl" />
                                                        </span>
                                                        <span>
                                                            <img src="../assets/images/4by3.jpg" alt="" class="rounded img-4by3-lg" />
                                                        </span>
                                                        <span>
                                                            <img src="../assets/images/4by3.jpg" alt="" class="rounded img-4by3-md" />
                                                        </span>
                                                        <span>
                                                            <img src="../assets/images/4by3.jpg" alt="" class="rounded img-4by3-sm" />
                                                        </span>
                                                        <span>
                                                            <img src="../assets/images/4by3.jpg" alt="" class="rounded img-4by3-xs" />
                                                        </span>

Color

Predefined avatar color and styles for more usage. Use .avatar-* classes.

Design
HTML

GK GK GK GK GK GK GK GK

<span class="avatar avatar-md avatar-primary">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-secondary">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-success">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-warning">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-info">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-danger">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-light">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-dark">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>

Design
HTML

GK GK GK GK GK GK GK GK

<span class="avatar avatar-md avatar-primary-soft">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-secondary-soft">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-success-soft">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-warning-soft">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-info-soft">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-danger-soft">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            
                                                            <span class="avatar avatar-md avatar-light-soft">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>
                                                            <span class="avatar avatar-md avatar-dark-soft">
                                                                <span class="avatar-initials rounded-circle">GK</span>
                                                            </span>