Avatars
Avatars can be used to represent people or objects. They come in different sizes and can be used in various scenarios.
Examples
Default
Avatars can be custom photos, uploaded by users, or custom placeholders with a background and the user’s name initials uppercased.
Show code
TC
WS
AE
<span class="avatar bg-primary text-white">TC</span>
<span class="avatar bg-warning text-white">WS</span>
<span class="avatar bg-dark text-white">AE</span>Links
Show code
<a href="#" class="avatar bg-primary text-white">TC</a>
<a href="#" class="avatar bg-warning text-white">WS</a>
<a href="#" class="avatar bg-dark text-white">AE</a>Sizing
Show code
TC
WS
AE
<span class="avatar bg-primary text-white avatar-sm">TC</span>
<span class="avatar bg-warning text-white">WS</span>
<span class="avatar bg-dark text-white avatar-lg">AE</span>Shape
Show code
TC
WS
AE
<span class="avatar bg-primary text-white rounded-circle avatar-sm">TC</span>
<span class="avatar bg-warning text-white rounded-circle">WS</span>
<span class="avatar bg-dark text-white rounded-circle avatar-lg">AE</span>Image
Show code
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar ">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar avatar-lg">
Show code
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar rounded-circle avatar-lg">Avatar group
Text
Show code
TC
WS
AE
<div class="avatar-group">
<span class="avatar bg-primary text-white rounded-circle">TC</span>
<span class="avatar bg-warning text-white rounded-circle">WS</span>
<span class="avatar bg-dark text-white rounded-circle">AE</span>
</div>Image
Show code
<div class="avatar-group">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-3.jpg" class="avatar rounded-circle">
</div>Parent-child avatars
Show code
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="avatar-child">
</div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-3.jpg" class="avatar-child">
</div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar rounded-circle avatar-lg">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-4.jpg" class="avatar-child">
</div>
Show code
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar rounded-circle avatar-sm">
<span class="avatar-child avatar-badge bg-success"></span>
</div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar rounded-circle">
<span class="avatar-child avatar-badge bg-success"></span>
</div>
<div class="avatar-parent-child">
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar rounded-circle avatar-lg">
<span class="avatar-child avatar-badge bg-success"></span>
</div>Connected avatars
Show code
<div class="avatar-connect">
<ul class="d-flex justify-content-between">
<li>
<img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar avatar-lg shadow rounded-circle">
</li>
<li>
<img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="avatar avatar-lg shadow rounded-circle">
</li>
<li>
<img alt="Image placeholder" src="../../assets/img/theme/light/person-3.jpg" class="avatar avatar-lg shadow rounded-circle">
</li>
</ul>
</div>