Components

Avatar

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>