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>

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

Image placeholder Image placeholder Image placeholder 
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  avatar-sm">

<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar ">

<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  avatar-lg">
Image placeholder Image placeholder Image placeholder 
<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  rounded-circle avatar-sm">

<img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  rounded-circle">

<img alt="Image placeholder" src="../../assets/img/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

Image placeholder Image placeholder Image placeholder 
<div class="avatar-group">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  rounded-circle">

    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="avatar  rounded-circle">

    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="avatar  rounded-circle">

</div>

Parent-child avatars

Image placeholder Image placeholder
Image placeholder Image placeholder
Image placeholder Image placeholder 
<div class="avatar-parent-child">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  rounded-circle avatar-sm">

	
	<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="avatar-child">
	
</div>

<div class="avatar-parent-child">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  rounded-circle">

	
	<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="avatar-child">
	
</div>

<div class="avatar-parent-child">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="avatar  rounded-circle avatar-lg">

	
	<img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="avatar-child">
	
</div>
Image placeholder
Image placeholder
Image placeholder 
<div class="avatar-parent-child">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.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/team-1-800x800.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/team-1-800x800.jpg" class="avatar  rounded-circle avatar-lg">

	
	<span class="avatar-child avatar-badge bg-success"></span>
	
</div>

Connected avatars

  • Image placeholder
  • Image placeholder
  • Image placeholder 
<div class="avatar-connect">
	<ul class="d-flex justify-content-between">
		<li>
			<img alt="Image placeholder" src="../../assets/img/theme/light/thumb-1.jpg" class="avatar avatar-lg shadow rounded-circle">
		</li>
		<li>
			<img alt="Image placeholder" src="../../assets/img/theme/light/thumb-2.jpg" class="avatar avatar-lg shadow rounded-circle">
		</li>
		<li>
			<img alt="Image placeholder" src="../../assets/img/theme/light/thumb-3.jpg" class="avatar avatar-lg shadow rounded-circle">
		</li>
	</ul>
</div>
Summary