Use .badge-collapsed-img class on ul tag.
<div class="avatar avatar-xl">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-lg">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm">
<img alt="avatar" 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="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-lg avatar-indicators avatar-online">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-indicators avatar-offline">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-sm avatar-indicators avatar-online">
<img alt="avatar" 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="assets/img/profile-12.jpeg" class="rounded" />
</div>
<div class="avatar avatar-xl">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-lg">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded" />
</div>
<div class="avatar avatar-lg">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
Use div with .avatar--group class and put div.avatar inside it.
AG
AG
<div class="avatar--group">
<div class="avatar avatar-md">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-md">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-md">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar avatar-md">
<span class="avatar-title rounded-circle">AG</span>
</div>
</div>
Use .translateY-axis class to make animate profile on Y-axis.
AG
<div class="avatar--group">
<div class="avatar translateY-axis">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar translateY-axis">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar translateY-axis">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar translateY-axis">
<span class="avatar-title rounded-circle">AG</span>
</div>
</div>
Use .translateX-axis class to make animate profile on X-axis.
AG
<div class="avatar--group">
<div class="avatar translateX-axis">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar translateX-axis">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar translateX-axis">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle" />
</div>
<div class="avatar translateX-axis">
<span class="avatar-title rounded-circle">AG</span>
</div>
</div>
Use Bootstrap Tooltip on img tag and span.avatar-title tag
AG
<div class="avatar--group">
<div class="avatar">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle bs-tooltip" data-original-title="Judy Holmes" />
</div>
<div class="avatar">
<img alt="avatar" src="assets/img/profile-12.jpeg" class="rounded-circle bs-tooltip" data-original-title="Judy Holmes" />
</div>
<div class="avatar">
<img alt="avatar" 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>