Basic image avatars with sizing.
<div class="avatar avatar-xxl">
<img src="..." alt="">
</div>
<div class="avatar avatar-xl">
<img src="..." alt="">
</div>
<div class="avatar">
<img src="..." alt="">
</div>
<div class="avatar avatar-sm">
<img src="..." alt="">
</div>
<div class="avatar avatar-xs">
<img src="..." alt="">
</div>
Avatars with status indicator. (Active, Unknown, Offline)
<div class="avatar avatar-xxl status status-online">
<img src="..." alt="">
</div>
<div class="avatar avatar-xl status">
<img src="..." alt="">
</div>
<div class="avatar status status-offline">
<img src="..." alt="">
</div>
You can stack avatars in a container and also they will have cool hover animation.
<div class="avatar-container">
<div class="avatar avatar-rounded">
<img src="..." alt="">
</div>
<div class="avatar avatar-rounded">
<img src="..." alt="">
</div>
<div class="avatar avatar-rounded">
<img src="..." alt="">
</div>
<div class="avatar avatar-rounded">
<img src="..." alt="">
</div>
<div class="avatar avatar-rounded">
<img src="..." alt="">
</div>
</div>
Some cool avatars with initials.
<div class="avatar avatar-xxl>
<div class="avatar-title">DB</div>
</div>
<div class="avatar avatar-xl>
<div class="avatar-title">AC</div>
</div>
<div class="avatar>
<div class="avatar-title">LK</div>
</div>
<div class="avatar avatar-sm>
<div class="avatar-title">OO</div>
</div>
<div class="avatar avatar-xs>
<div class="avatar-title">FR</div>
</div>
Make your avatars rounded by adding .avatar-rounded
class to them.
<div class="avatar avatar-xxl avatar-rounded>
<div class="avatar-title">DB</div>
</div>
<div class="avatar avatar-xl avatar-rounded>
<div class="avatar-title">AC</div>
</div>
<div class="avatar avatar-rounded">
<div class="avatar-title">LK</div>
</div>
You can easily combine bootstrap tooltips with avatars!
<div class="avatar avatar-rounded">
<img src="..." data-bs-toggle="tooltip" data-bs-placement="top" title="Peter Griffin">
</div>
<div class="avatar avatar-rounded">
<img src="..." data-bs-toggle="tooltip" data-bs-placement="top" title="Peter Griffin">
</div>
<div class="avatar avatar-rounded">
<img src="..." data-bs-toggle="tooltip" data-bs-placement="top" title="Peter Griffin">
</div>
<div class="avatar avatar-rounded">
<img src="..." data-bs-toggle="tooltip" data-bs-placement="top" title="Peter Griffin">
</div>
<div class="avatar avatar-rounded">
<img src="..." data-bs-toggle="tooltip" data-bs-placement="top" title="Peter Griffin">
</div>