New

Avatars

Individual and grouped avatars. You can change the size, shape, or to use name initials instead of images.

<div class="avatar avatar-xl">
  <img src="../assets/img/uifaces/9.jpg" class="avatar-image rounded-circle">
</div>
<div class="avatar avatar-lg">
  <img src="../assets/img/uifaces/9.jpg" class="avatar-image rounded-circle">
</div>
<div class="avatar">
  <img src="../assets/img/uifaces/9.jpg" class="avatar-image rounded-circle">
</div>
<div class="avatar avatar-sm">
  <img src="../assets/img/uifaces/9.jpg" class="avatar-image rounded-circle">
</div>
<div class="avatar avatar-xs">
  <img src="../assets/img/uifaces/9.jpg" class="avatar-image rounded-circle">
</div>

Shapes

<div class="avatar avatar-xl">
  <img src="../assets/img/uifaces/9.jpg" class="avatar-image">
</div>
<div class="avatar avatar-lg">
  <img src="../assets/img/uifaces/9.jpg" class="avatar-image rounded-circle">
</div>
<div class="avatar">
  <img src="../assets/img/uifaces/9.jpg" class="avatar-image rounded">
</div>
<div class="avatar avatar-sm">
  <img src="../assets/img/uifaces/9.jpg" class="avatar-image rounded-circle">
</div>
<div class="avatar avatar-xs">
  <img src="../assets/img/uifaces/9.jpg" class="avatar-image rounded">
</div>

Letters

EA
JF
DH
SC
EL
<div class="avatar avatar-xl">
  <div class="avatar-letters rounded-circle bg-success text-white">EA</div>
</div>
<div class="avatar avatar-lg">
  <div class="avatar-letters rounded-circle bg-primary text-white">JF</div>
</div>
<div class="avatar">
  <div class="avatar-letters rounded-circle bg-pastel-purple">DH</div>
</div>
<div class="avatar avatar-sm">
  <div class="avatar-letters rounded-circle bg-info text-white">SC</div>
</div>
<div class="avatar avatar-xs">
  <div class="avatar-letters rounded-circle bg-dark text-white">EL</div>
</div>

Avatar groups

SC

SC

SC

SC

SC
<div class="avatar-group">
  <div class="avatar">
    <img src="../assets/img/uifaces/4.jpg" class="avatar-image rounded-circle">
  </div>
  <div class="avatar">
    <img src="../assets/img/uifaces/12.jpg" class="avatar-image rounded-circle">
  </div>
  <div class="avatar">
    <img src="../assets/img/uifaces/11.jpg" class="avatar-image rounded-circle">
  </div>
  <div class="avatar">
    <div class="avatar-letters rounded-circle bg-pastel-purple">SC</div>
  </div>
  <div class="avatar">
    <img src="../assets/img/uifaces/14.jpg" class="avatar-image rounded-circle">
  </div>
</div>