EN
Tanzania
China
Tunisia
Spain
Default
<figure class="avatar"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"></figure>Sizes
<figure class="avatar avatar-xl"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"></figure><figure class="avatar avatar-lg"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"></figure><figure class="avatar"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"></figure><figure class="avatar avatar-sm"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"></figure>Avatar text placeholders
<figure class="avatar"> <span class="avatar-title rounded-circle">A</span></figure>Avatar text sizes
<figure class="avatar avatar-xl"> <span class="avatar-title rounded-circle">A</span></figure><figure class="avatar avatar-lg"> <span class="avatar-title rounded-circle">B</span></figure><figure class="avatar"> <span class="avatar-title rounded-circle">C</span></figure><figure class="avatar avatar-sm"> <span class="avatar-title rounded-circle">D</span></figure>Avatar with link
<figure class="avatar"> <a href="#"> <span class="avatar-title rounded-circle">A</span> </a></figure>Colorful avatars
<figure class="avatar avatar-xl"> <span class="avatar-title bg-primary rounded-circle">A</span></figure><figure class="avatar avatar-lg"> <span class="avatar-title bg-info rounded-circle">B</span></figure><figure class="avatar"> <span class="avatar-title bg-success rounded-circle">C</span></figure><figure class="avatar avatar-sm"> <span class="avatar-title bg-danger rounded-circle">D</span></figure>Avatar states
<figure class="avatar avatar-xl avatar-state-warning"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"></figure><figure class="avatar avatar-lg avatar-state-success"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"></figure><figure class="avatar avatar-state-danger"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"></figure><figure class="avatar avatar-sm avatar-state-secondary"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"></figure>Avatar shapes
<figure class="avatar"> <img src="avatar.jpg" alt="avatar"></figure><figure class="avatar"> <img src="avatar.jpg" class="rounded" alt="avatar"></figure><figure class="avatar"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"></figure>Avatar group
<div class="avatar-group"> <figure class="avatar"> <span class="avatar-title bg-success rounded-circle">E</span> </figure> <figure class="avatar"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"> </figure> <figure class="avatar"> <span class="avatar-title bg-danger rounded-circle">S</span> </figure> <figure class="avatar"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"> </figure> <figure class="avatar"> <span class="avatar-title bg-primary rounded-circle">C</span> </figure></div>