Get support Purchase Now Preview Demo

AvatarsExclusive

Contextual feedback messages

Sizes

Use .avatar class for showing avatar images. Avatars are available in different sizes from extra small to extra-extra large. E.g. .avatar-xl for extra large size.

...
...
...
...
...
... 
<div class="avatar avatar-xxl avatar-circle">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-xl avatar-circle">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-lg avatar-circle">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-circle">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-sm avatar-circle">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-xs avatar-circle">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>

Placeholder

Try .avatar-title within the avatar container if don't want to add image, just a placeholder. It's useful, when you don't have image to show.

SR
SR
SR
SR
SR
SR 
<div class="avatar avatar-circle avatar-xxl">
    <span class="avatar-title">SR</span>
</div>
<div class="avatar avatar-circle avatar-xl">
    <span class="avatar-title">SR</span>
</div>
<div class="avatar avatar-circle avatar-lg">
    <span class="avatar-title">SR</span>
</div>
<div class="avatar avatar-circle">
    <span class="avatar-title">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title">SR</span>
</div>
<div class="avatar avatar-circle avatar-xs">
    <span class="avatar-title">SR</span>
</div>

Status

With .avatar-{status} class you can add a little circle to the avatar to show the user's availability.

...
...
...
... 
<div class="avatar avatar-circle avatar-online">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-circle avatar-busy">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-circle avatar-away">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-circle avatar-offline">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>

Colors

When you use placeholder you can customize the color easily using text-bg-{color} helpers.

SR
SR
SR
SR
SR
SR
SR
SR 
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-primary">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-secondary">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-success">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-danger">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-warning">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-info">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-light">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-dark">SR</span>
</div>

Soft style

You can use soft version if you prefer that! Try with .text-bg-{color}-soft class.

SR
SR
SR
SR
SR
SR
SR
SR 
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-primary-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-secondary-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-success-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-danger-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-warning-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-info-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-light-soft">SR</span>
</div>
<div class="avatar avatar-circle avatar-sm">
    <span class="avatar-title text-bg-dark-soft">SR</span>
</div>

Shape

Simply use .avatar or with and additional .avatar-circle class for a circle version, it's your choice!

...
...
...
...
...
... 
<div class="avatar avatar-xl">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-xl avatar-circle">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-lg">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-lg avatar-circle">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>
<div class="avatar avatar-circle">
    <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img">
</div>

Group

You can also group avatars together. The active avatar will jump to the front when you hover over with the cursor. Use .avatar-group class in a container div. Combine with different sizes or colors. We used a thin border style.

...
SR
...
2+
...
SR
...
2+ 
<div class="avatar-group">
    <div class="avatar avatar-lg avatar-circle">
        <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img border border-2 border-white">
    </div>
    <div class="avatar avatar-lg avatar-circle">
        <span class="avatar-title border border-2 text-bg-dark border-white">SR</span>
    </div>
    <div class="avatar avatar-lg avatar-circle">
        <img src="../assets/images/profiles/profile-02.jpeg" alt="..." class="avatar-img border border-2 border-white">
    </div>
    <div class="avatar avatar-lg avatar-circle">
        <span class="avatar-title border border-2 text-bg-primary border-white">2+</span>
    </div>
</div>
 
<div class="avatar-group">
    <div class="avatar avatar-circle">
        <img src="../assets/images/profiles/profile-06.jpeg" alt="..." class="avatar-img border border-2 border-white">
    </div>
    <div class="avatar avatar-circle">
        <span class="avatar-title border border-2 text-bg-dark border-white">SR</span>
    </div>
    <div class="avatar avatar-circle">
        <img src="../assets/images/profiles/profile-02.jpeg" alt="..." class="avatar-img border border-2 border-white">
    </div>
    <div class="avatar avatar-circle">
        <span class="avatar-title border border-2 text-bg-primary border-white">2+</span>
    </div>
</div>