Avatar
Avatars are user's face image that you can use throughout the design from tables to dialog or menus with options for sizes and shapes.
Sizes
An avatar can have different sizes like larger and smaller avatar.
<div class="avatar avatar-xs"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar avatar-sm"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar avatar-md"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar avatar-lg"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar avatar-xl"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar avatar-xxl"><img src="..." class="rounded-circle" alt=""></div>Shapes
An avatar can have different shapes by using Bootstrap's border-radius utilities classes.
<div class="avatar"><img src="..." class="rounded-circle" alt=""></div>
<div class="avatar"><img src="..." class="rounded" alt=""></div>Initials
An avatar can have a temporary use of user's initial name while their photos are not yet available.
df
df
df
df
df
df
df
<div class="avatar"><span class="avatar-initial rounded-circle">df</span></div>Status Indicator
An avatar can have a status indicator to indicate users availability.
df
<div class="avatar avatar-online">...</div>
<div class="avatar avatar-offline">...</div>