Avatars

Redy-to-use avatar components, which are great to use everywhere when you want to display user related data.
BasicExclusive

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>
Status IndicatorExclusive

Avatars with status indicator. (Active, Unknown, Offline)

AC
<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>
StackedExclusive

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>
InitialsExclusive

Some cool avatars with initials.

DB
AC
LK
OO
FR
<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>
RoundedExclusive

Make your avatars rounded by adding .avatar-rounded class to them.

LK
<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>
TooltipsExclusive

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>