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.
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
Sizing
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
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
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="avatar avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="avatar ">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="avatar avatar-lg"> <img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="avatar rounded-circle avatar-sm">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="avatar rounded-circle">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="avatar rounded-circle avatar-lg">Avatar group
Text
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
<div class="avatar-group">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg" class="avatar rounded-circle">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="avatar rounded-circle">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-3-800x800.jpg" class="avatar rounded-circle">
</div>Parent-child avatars
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg">
</a>
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="avatar-child">
</div>
<div class="avatar-parent-child">
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg">
</a>
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="avatar-child">
</div>
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg">
</a>
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-2-800x800.jpg" class="avatar-child">
</div><div class="avatar-parent-child">
<a href="#" class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-success"></span>
</div>
<div class="avatar-parent-child">
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-success"></span>
</div>
<div class="avatar-parent-child">
<a href="#" class="avatar avatar-lg rounded-circle">
<img alt="Image placeholder" src="/assets/media/images/theme/light/team-1-800x800.jpg">
</a>
<span class="avatar-child avatar-badge bg-success"></span>
</div>Connected avatars
<div class="avatar-connect">
<ul class="d-flex justify-content-between">
<li>
<img alt="Image placeholder" src="/assets/media/images/theme/light/thumb-1.jpg" class="avatar avatar-lg shadow rounded-circle">
</li>
<li>
<img alt="Image placeholder" src="/assets/media/images/theme/light/thumb-2.jpg" class="avatar avatar-lg shadow rounded-circle">
</li>
<li>
<img alt="Image placeholder" src="/assets/media/images/theme/light/thumb-3.jpg" class="avatar avatar-lg shadow rounded-circle">
</li>
</ul>
</div>