# Avatar

Examples for choosing different size of image classes for an Avatar (also known as a profile picture or userpic)

#### Avatar

    <div class="avatar">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
    </div>
    <div class="avatar">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
    </div>
    <div class="avatar">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
    </div>
    <div class="avatar">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
    </div>

#### Avatar group

    <ul class="avatar-group">
      <li class="avatar">
        <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
      </li>
      <li class="avatar">
        <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
      </li>
      <li class="avatar">
        <img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
      </li>
      <li class="avatar">
        <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
      </li>
      <li class="avatar">
        <div class="avatar-img rounded-circle text-bg-primary"><i class="fas fa-plus text-white position-absolute top-50 start-50 translate-middle"></i></div>
      </li>
    </ul>

#### Avatar label

SL
MK
PT
MP
VP
DG
SL
MK
PT
MP
VP
W

    <div class="avatar">
      <div class="avatar-img rounded-circle text-bg-primary"><span class="position-absolute top-50 start-50 translate-middle fw-bold">SL</span></div>
    </div>
    <div class="avatar">
      <div class="avatar-img rounded-circle text-bg-danger"><span class="position-absolute top-50 start-50 translate-middle fw-bold">MK</span></div>
    </div>
    <div class="avatar">
      <div class="avatar-img rounded-circle text-bg-warning"><span class="position-absolute top-50 start-50 translate-middle fw-bold">PT</span></div>
    </div>
    <div class="avatar">
      <div class="avatar-img rounded-circle text-bg-success"><span class="position-absolute top-50 start-50 translate-middle fw-bold">MP</span></div>
    </div>
    <div class="avatar">
      <div class="avatar-img rounded-circle text-bg-info"><span class="position-absolute top-50 start-50 translate-middle fw-bold">VP</span></div>
    </div>
    <div class="avatar">
      <div class="avatar-img rounded-circle text-bg-dark"><span class="position-absolute top-50 start-50 translate-middle fw-bold">DG</span></div>
    </div>

    <div class="avatar">
      <div class="avatar-img rounded-circle bg-primary bg-opacity-10"><span class="text-primary position-absolute top-50 start-50 translate-middle fw-bold">SL</span></div>
    </div>
    <div class="avatar">
      <div class="avatar-img rounded-circle bg-danger bg-opacity-10"><span class="text-danger position-absolute top-50 start-50 translate-middle fw-bold">MK</span></div>
    </div>
    <div class="avatar">
      <div class="avatar-img rounded-circle bg-warning bg-opacity-15"><span class="text-warning position-absolute top-50 start-50 translate-middle fw-bold">PT</span></div>
    </div>
    <div class="avatar">
      <div class="avatar-img rounded-circle bg-success bg-opacity-10"><span class="text-success position-absolute top-50 start-50 translate-middle fw-bold">MP</span></div>
    </div>
    <div class="avatar">
      <div class="avatar-img rounded-circle bg-info bg-opacity-10"><span class="text-info position-absolute top-50 start-50 translate-middle fw-bold">VP</span></div>
    </div>
    <div class="avatar">
      <div class="avatar-img rounded-circle bg-dark bg-opacity-10"><span class="text-dark position-absolute top-50 start-50 translate-middle fw-bold">W</span></div>
    </div>

#### Avatar Styles

SL
MK
PT
VP
WB

    <div class="avatar align-middle">
      <img class="avatar-img" src="assets/images/avatar/01.jpg" alt="avatar">
    </div>
    <div class="avatar align-middle">
      <div class="avatar-img text-bg-primary"><span class="position-absolute top-50 start-50 translate-middle fw-bold">SL</span></div>
    </div>
    <div class="avatar align-middle">
      <img class="avatar-img rounded" src="assets/images/avatar/02.jpg" alt="avatar">
    </div>
    <div class="avatar align-middle">
      <div class="avatar-img rounded text-bg-danger"><span class="position-absolute top-50 start-50 translate-middle fw-bold">MK</span></div>
    </div>
    <div class="avatar align-middle">
      <img class="avatar-img rounded-3" src="assets/images/avatar/09.jpg" alt="avatar">
    </div>
    <div class="avatar align-middle">
      <div class="avatar-img rounded-3 text-bg-info"><span class="position-absolute top-50 start-50 translate-middle fw-bold">PT</span></div>
    </div>
    <div class="avatar align-middle">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
    </div>
    <div class="avatar align-middle">
      <div class="avatar-img rounded-circle text-bg-warning"><span class="position-absolute top-50 start-50 translate-middle fw-bold">VP</span></div>
    </div>
    <div class="avatar align-middle">
      <img class="avatar-img rounded-circle border border-3 border-dark" src="assets/images/avatar/09.jpg" alt="avatar">
    </div>
    <div class="avatar align-middle">
      <div class="avatar-img rounded-circle border border-3 border-info text-bg-dark"><span class="position-absolute top-50 start-50 translate-middle fw-bold">WB</span></div>
    </div>
    <div class="avatar align-middle">
      <div class="avatar-img rounded-circle text-bg-success"><span class="position-absolute top-50 start-50 translate-middle fw-bold"><i class="bi bi-check-lg"></i></span></div>
    </div>

#### Avatar sizes

    <div class="avatar avatar-xs">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
    </div>
    <div class="avatar avatar-sm">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
    </div>
    <div class="avatar">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
    </div>
    <div class="avatar avatar-lg">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
    </div>
    <div class="avatar avatar-xl">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
    </div>
    <div class="avatar avatar-xxl">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
    </div>
    <div class="avatar avatar-xxxl">
      <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
    </div>