
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>
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>
An avatar can have a temporary use of user's initial name while their photos are not yet available.
<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>
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>