Sizes

An avatar can have different sizes like larger and smaller avatar.

<a href="javascript://" class="avatar avatar-sm">
<img src="https://i.imgur.com/ROPF2fQ.png">
</a>

<a href="javascript://" class="avatar">
<img src="https://i.imgur.com/ROPF2fQ.png">

</a>

<a href="javascript://" class="avatar avatar-lg">
<img src="https://i.imgur.com/ROPF2fQ.png">
</a>

<a href="javascript://" class="avatar avatar-xl">
<img src="https://i.imgur.com/ROPF2fQ.png">
</a>

<a href="javascript://" class="avatar avatar-xxl">
<img src="https://i.imgur.com/ROPF2fQ.png">
</a>

Status Indicator

Add an online or offline status indicator to show user's availability.

<a href="javascript://" class="avatar avatar-sm">
    <img src="https://i.imgur.com/ROPF2fQ.png">
</a>

<a href="javascript://" class="avatar avatar-on">
    <img src="https://i.imgur.com/ROPF2fQ.png">

</a>

<a href="javascript://" class="avatar avatar-lg avatar-busy">
    <img src="https://i.imgur.com/ROPF2fQ.png">
</a>

<a href="javascript://" class="avatar avatar-xl avatar-away">
    <img src="https://i.imgur.com/ROPF2fQ.png">
</a>

<a href="javascript://" class="avatar avatar-xxl avatar-off">
    <img src="https://i.imgur.com/ROPF2fQ.png">
</a>

Initials

An avatar can have a temporary use of user's initial name while their photos are not yet available.

X X X X X 
<a href="javascript://" class="avatar avatar-sm bg-light text-muted">
    X
</a>

<a href="javascript://" class="avatar bg-light text-muted">
    X
</a>

<a href="javascript://" class="avatar avatar-lg bg-light text-muted">
    X
</a>

<a href="javascript://" class="avatar avatar-xl bg-light text-muted">
    X
</a>

<a href="javascript://" class="avatar avatar-xxl bg-light text-muted">
    X
</a>

Initials

An avatar can have a temporary use of user's initial name while their photos are not yet available.

<div class="avatar-group">
    <a href="javascript://" class="avatar">
        <img src="https://i.imgur.com/ROPF2fQ.png">
    </a>
    <a href="javascript://" class="avatar">
        <img src="https://i.imgur.com/ROPF2fQ.png">
    </a>
    <a href="javascript://" class="avatar">
        <img src="https://i.imgur.com/ROPF2fQ.png">
    </a>
    <a href="javascript://" class="avatar">
        <img src="https://i.imgur.com/ROPF2fQ.png">
    </a>
    <a href="javascript://" class="avatar">
        <img src="https://i.imgur.com/ROPF2fQ.png">
    </a>
</div>