AVATARS
Avatars : Avatars are used to display a small profile picture for the user who logs in.
COMPONENT DEMO
Text as an avatar:
KL
DS
NC
MA
TM
<!-- EXTRA LARGE SIZED TEXT AVATAR -->
<div class="avatar avatar-xl m-4">
<p class="txt-xl">KL</p>
</div>
<!-- LARGE SIZED TEXT AVATAR -->
<div class="avatar avatar-lg m-4">
<p class="txt-lg">DS</p>
</div>
<!-- MEDIUM SIZED TEXT AVATAR -->
<div class="avatar avatar-md m-4">
<p class="txt-md">NC</p>
</div>
<!-- SMALL SIZED TEXT AVATAR -->
<div class="avatar avatar-sm m-4">
<p class="txt-sm">MA</p>
</div>
<!-- EXTRA SMALL SIZED TEXT AVATAR -->
<div class="avatar avatar-xs m-4">
<p class="txt-xs">TM</p>
</div>
Icon as an Avatar
<!-- EXTRA LARGE SIZED ICON AVATAR -->
<div class="avatar avatar-xl m-4">
<p class="txt-xl">
<i class="fas fa-palette"></i>
</p>
</div>
<!-- LARGE SIZED ICON AVATAR-->
<div class="avatar avatar-lg m-4">
<p class="txt-lg">
<i class="fas fa-phone-alt"></i>
</p>
</div>
<!-- MEDIUM SIZED ICON AVATAR -->
<div class="avatar avatar-md m-4">
<p class="txt-md">
<i class="fas fa-comments"></i>
</p>
</div>
<!-- SMALL SIZED ICON AVATAR -->
<div class="avatar avatar-sm m-4">
<p class="txt-sm">
<i class="fab fa-react"></i>
</p>
</div>
<!-- EXTRA SMALL SIZED ICON AVATAR -->
<div class="avatar avatar-xs m-4">
<p class="txt-xs">
<i class="fas fa-bed"></i>
</p>
</div>
Image As An Avatar
<!-- EXTRA SIZED IMAGE AVATAR -->
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-xl m-4"
alt="Dog staring"
/>
<!-- LARGE SIZED IMAGE AVATAR -->
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-lg m-4"
alt="Dog staring"
/>
<!-- MEDIUM SIZED IMAGE AVATAR -->
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-md m-4"
alt="Dog staring"
/>
<!-- SMALL SIZED IMAGE AVATAR -->
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-sm m-4"
alt="Dog Staring"
/>
<!-- EXTRA SMALL SIZED IMAGE AVATAR -->
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-xs m-4"
alt="Dog Staring"
/>
Square Avatars for Text,Icon and Image
NC
<!-- SQUARE SHAPED LARGE SIZED ICON AVATAR -->
<div class="avatar avatar-lg avatar-square m-4">
<p class="txt-lg">
<i class="fab fa-react"></i>
</p>
</div>
<!-- SQUARE SHAPED MEDIUM SIZED TEXT AVATAR -->
<div class="avatar avatar-md avatar-square m-4">
<p class="txt-md">NC</p>
</div>
<!-- SQUARE SHAPED SMALL SIZED IMAGE AVATAR -->
<img
loading="lazy"
src="https://picsum.photos/id/237/400/300"
class="avatar avatar-sm avatar-square m-4"
alt="Dog Staring"
/>