Avatar

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>