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