Use .badge-collapsed-imgclass on ultag.
<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>
Use .avatar-indicatorsclass on div.avatarelement
<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>
Use .roundedand .rounded-circleclass to make avatar rounded and circlular respectively.
<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>
Use divwith .avatar--groupclass and put div.avatarinside it.
<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>
Use .translateY-axisclass to make animate profile on Y-axis.
<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>
Use .translateX-axisclass to make animate profile on X-axis.
<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>
Use Bootstrap Tooltip on imgtag and span.avatar-titletag
<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>