Avatar

Basic Indicators Shapes Icons Initials Group Animate Tooltip Chips

Use .badge-collapsed-img class on ul tag.

<div class="avatar avatar-xl">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-lg">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
</div>

Use .avatar-indicators class on div.avatar element

<div class="avatar avatar-xl avatar-indicators avatar-offline">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-lg avatar-indicators avatar-online">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-indicators avatar-offline">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm avatar-indicators avatar-online">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
</div>

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

<div class="avatar avatar-xl">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded" />
</div>
<div class="avatar avatar-xl">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
</div>

<div class="avatar avatar-lg">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded" />
</div>
<div class="avatar avatar-lg">
    <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
</div>

Use span with .avatar-icon class to make Icons avatar.

<div class="avatar avatar-xl">
    <span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
</div>
<div class="avatar avatar-lg">
    <span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
</div>
<div class="avatar">
    <span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
</div>
<div class="avatar avatar-sm">
    <span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
</div>

Use span with .avatar-title class to make user name tags.

<div class="avatar avatar-xl">
    <span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar avatar-lg">
    <span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar">
    <span class="avatar-title rounded-circle">AG</span>
</div>
<div class="avatar avatar-sm">
    <span class="avatar-title rounded-circle">AG</span>
</div>

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

<div class="avatar--group">
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile-16.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/delete-user-4.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile-5.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

Use .avatar--group with .avatar-group-badge class also, add .badge element with .counter class.

<div class="avatar--group avatar-group-badge">
    <span class="badge badge-primary counter"></span>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="assets/img/profile-16.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="assets/img/delete-user-4.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="assets/img/profile-5.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>



<div class="avatar--group avatar-group-badge">
    <span class="badge badge-primary counter">9</span>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="assets/img/profile-16.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="assets/img/delete-user-4.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="assets/img/profile-5.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

Use .translateY-axis class to make animate profile on Y-axis.

<div class="avatar--group">
    <div class="avatar avatar-sm translateY-axis">
        <img alt="avatar" src="../src/assets/img/profile-16.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateY-axis">
        <img alt="avatar" src="../src/assets/img/delete-user-4.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateY-axis">
        <img alt="avatar" src="../src/assets/img/profile-5.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateY-axis">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

Use .translateX-axis class to make animate profile on X-axis.

<div class="avatar--group">
    <div class="avatar avatar-sm translateX-axis">
        <img alt="avatar" src="../src/assets/img/profile-16.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateX-axis">
        <img alt="avatar" src="../src/assets/img/delete-user-4.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateX-axis">
        <img alt="avatar" src="../src/assets/img/profile-5.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateX-axis">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

Use Bootstrap Tooltip on img tag and span.avatar-title tag

<div class="avatar--group">
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile-16.jpeg" class="rounded-circle  bs-tooltip" data-bs-original-title="Judy Holmes" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/delete-user-4.jpeg" class="rounded-circle  bs-tooltip" data-bs-original-title="Judy Holmes" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile-5.jpeg" class="rounded-circle  bs-tooltip" data-bs-original-title="Judy Holmes" />
    </div>
    <div class="avatar avatar-sm">
        <span class="avatar-title rounded-circle  bs-tooltip" data-bs-original-title="Alan Green">AG</span>
    </div>
</div>

Kelly

Mary

Lisa

Andy

Daisy

James

Oscar

<div class="avatar--group">
    <div class="avatar">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
    </div>
    <div class="avatar">
        <span class="avatar-title rounded-circle  bs-tooltip" data-original-title="Alan Green">AG</span>
    </div>
</div>

Kelly ×

Mary ×

Lisa ×

Andy ×

Daisy ×

James ×

Oscar ×

<div class="avatar--group">
    <div class="avatar">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
    </div>
    <div class="avatar">
        <span class="avatar-title rounded-circle  bs-tooltip" data-original-title="Alan Green">AG</span>
    </div>
</div>

Indicators

Shapes

Icons

Initials

Group

Group with badge

Animate Y-axis

Animate X-axis

Tooltip

Avatar Chips

Dismissable Chips

Kara Young

Daisy Anderson

Oscar Garner

Server Rebooted

Kelly Portfolio.pdf

Licence Expiring Soon