Avatar

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

Code

        

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

Use .avatar-indicators class on div.avatar element

Code

        

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

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

Code

        

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

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

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

Code

        

<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 div with .avatar--group class and put div.avatar inside it.

Code

        

<div class="avatar--group">
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-16.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-25.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-5.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <span class="avatar-title rounded-circle bg-primary:600 text-white">AG</span>
    </div>
</div>

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

Code

        

<div class="avatar--group">
    <div class="avatar avatar-sm translateY-axis">
        <img alt="avatar" src="../src/assets/img/profile/profile-16.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateY-axis">
        <img alt="avatar" src="../src/assets/img/profile/profile-33.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateY-axis">
        <img alt="avatar" src="../src/assets/img/profile/profile-5.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateY-axis">
        <span class="avatar-title rounded-circle bg-primary:600 text-white">AG</span>
    </div>
</div>

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

Code

        

<div class="avatar--group">
    <div class="avatar avatar-sm translateX-axis">
        <img alt="avatar" src="../src/assets/img/profile/profile-16.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateX-axis">
        <img alt="avatar" src="../src/assets/img/profile/profile-33.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateX-axis">
        <img alt="avatar" src="../src/assets/img/profile/profile-5.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm translateX-axis">
        <span class="avatar-title rounded-circle bg-primary:600 text-white">AG</span>
    </div>
</div>

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

Code

        

<div class="avatar--group">
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-16.png" class="rounded-circle  bs-tooltip" data-bs-original-title="Lisa" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-17.png" class="rounded-circle  bs-tooltip" data-bs-original-title="Mary" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-5.png" class="rounded-circle  bs-tooltip" data-bs-original-title="Andy" />
    </div>
    <div class="avatar avatar-sm">
        <span class="avatar-title rounded-circle  bs-tooltip bg-primary:600 text-white" data-bs-original-title="Alan Green">AG</span>
    </div>
</div>

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

Code

        

<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 .avatar--group with .avatar-group-badge class also, add .badge element with .counter class.

Code

        

<div class="avatar--group avatar-group-badge">
    <span class="badge badge-success counter"></span>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-16.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-24.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-5.png" 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-success counter">7</span>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-16.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-26.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile/profile-5.png" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

Kelly

Mary

Lisa

Andy

Daisy

Jess

Oscar

Code

        

<span class="avatar-chip bg-primary mb-2 me-4 position-relative">
    <img src="../src/assets/img/profile/profile-2.png" alt="Person" width="96" height="96">
    <span class="text">Kelly</span>
</span>

<span class="avatar-chip bg-success mb-2 me-4">
    <img src="../src/assets/img/delete-user-4.jpeg" alt="Person" width="96" height="96">
    <span class="text">Mary</span>
</span>

<span class="avatar-chip bg-info mb-2 me-4 position-relative">
    <img src="../src/assets/img/profile/profile-16.png" alt="Person" width="96" height="96">
    <span class="text">Lisa</span>
</span>

<span class="avatar-chip bg-danger mb-2 me-4">
    <img src="../src/assets/img/profile/profile-5.png" alt="Person" width="96" height="96">
    <span class="text">Andy</span>
</span>

<span class="avatar-chip bg-warning mb-2 me-4 position-relative">
    <img src="../src/assets/img/profile/profile-12.png" alt="Person" width="96" height="96">
    <span class="text">Daisy</span>
</span>

<span class="avatar-chip bg-secondary mb-2 me-4 position-relative">
    <img src="../src/assets/img/delete-user-17.jpeg" alt="Person" width="96" height="96">
    <span class="text">James</span>
</span>

<span class="avatar-chip bg-dark mb-2 me-4">
    <img src="../src/assets/img/profile/profile-1.png" alt="Person" width="96" height="96">
    <span class="text">Oscar</span>
</span>

Kelly ×

Mary ×

Lisa ×

Andy ×

Daisy ×

Jess ×

Oscar ×

Code

        

<span class="avatar-chip avatar-dismiss bg-primary mb-2 me-4 position-relative">
    <img src="../src/assets/img/profile/profile-2.png" alt="Person" width="96" height="96">
    <span class="text">Kelly</span>
    <span class="closebtn ms-2" onclick="this.parentElement.style.display='none'">&times;</span>
</span>

<span class="avatar-chip avatar-dismiss bg-success mb-2 me-4">
    <img src="../src/assets/img/delete-user-4.jpeg" alt="Person" width="96" height="96">
    <span class="text">Mary</span>
    <span class="closebtn ms-2" onclick="this.parentElement.style.display='none'">&times;</span>
</span>

<span class="avatar-chip avatar-dismiss bg-info mb-2 me-4 position-relative">
    <img src="../src/assets/img/profile/profile-16.png" alt="Person" width="96" height="96">
    <span class="text">Lisa</span>
    <span class="closebtn ms-2" onclick="this.parentElement.style.display='none'">&times;</span>
</span>

<span class="avatar-chip avatar-dismiss bg-danger mb-2 me-4">
    <img src="../src/assets/img/profile/profile-5.png" alt="Person" width="96" height="96">
    <span class="text">Andy</span>
    <span class="closebtn ms-2" onclick="this.parentElement.style.display='none'">&times;</span>
</span>

<span class="avatar-chip avatar-dismiss bg-warning mb-2 me-4 position-relative">
    <img src="../src/assets/img/profile/profile-12.png" alt="Person" width="96" height="96">
    <span class="text">Daisy</span>
    <span class="closebtn ms-2" onclick="this.parentElement.style.display='none'">&times;</span>
</span>

<span class="avatar-chip avatar-dismiss bg-secondary mb-2 me-4 position-relative">
    <img src="../src/assets/img/delete-user-17.jpeg" alt="Person" width="96" height="96">
    <span class="text">James</span>
    <span class="closebtn ms-2" onclick="this.parentElement.style.display='none'">&times;</span>
</span>

<span class="avatar-chip avatar-dismiss bg-dark mb-2 me-4">
    <img src="../src/assets/img/profile/profile-1.png" alt="Person" width="96" height="96">
    <span class="text">Oscar</span>
    <span class="closebtn ms-2" onclick="this.parentElement.style.display='none'">&times;</span>
</span>

Indicators

Shapes

Icons

Group

Animate Y-axis

Animate X-axis

Tooltip

Initials

Group with badge

Avatar Chips

Dismissable Chips

Shaun Park

Need help?