Sizes

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

avatar
avatar
avatar
avatar 
<div class="avatar avatar-xl">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar avatar-lg">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>

Indicators

Use .avatar-indicators class on div.avatar element

avatar
avatar
avatar
avatar 
<div class="avatar avatar-xl avatar-indicators avatar-offline">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar avatar-lg avatar-indicators avatar-online">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar avatar-indicators avatar-offline">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm avatar-indicators avatar-online">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>

Shapes

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

avatar
avatar
avatar
avatar 
<div class="avatar avatar-xl">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded" />
</div>
<div class="avatar avatar-xl">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>

<div class="avatar avatar-lg">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded" />
</div>
<div class="avatar avatar-lg">
    <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
</div>

Initials

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

AG
AG
AG
AG 
<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>

Group

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

avatar
avatar
avatar
AG
avatar
avatar
avatar
AG 
<div class="avatar--group">
    <div class="avatar avatar-md">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-md">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-md">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-md">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

Animate Y-axis

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

avatar
avatar
avatar
AG 
<div class="avatar--group">
    <div class="avatar translateY-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateY-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateY-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateY-axis">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

Animate X-axis

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

avatar
avatar
avatar
AG 
<div class="avatar--group">
    <div class="avatar translateX-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateX-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateX-axis">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle" />
    </div>
    <div class="avatar translateX-axis">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
</div>

Tooltip

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

avatar
avatar
avatar
AG 
<div class="avatar--group">
    <div class="avatar">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="assets/img/90x90.jpg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="assets/img/90x90.jpg" 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>

Copyright © 2021 DesignReset, All rights reserved.

Coded with