Default
image
<figure class="avatar"> <img src="avatar.jpg" class="rounded-circle" alt="avatar"></figure>
Sizes
image
image
image
image
<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
A
<figure class="avatar"> <span class="avatar-title rounded-circle">A</span></figure>
Avatar text sizes
A
B
C
D
<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
A
<figure class="avatar"> <a href="#"> <span class="avatar-title rounded-circle">A</span> </a></figure>
Colorful avatars
A
B
C
D
<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
image
image
image
image
<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
image
image
image
<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
E
image
S
image
C
<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>