### Avatars

Avatar Group

Copy

    <div class="container py-6">
      <div class="row mt-5 text-center">
        <div class="col-12">
          <div class="avatar-group">
            <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
              <img alt="Image placeholder" src="../../assets/img/team-1.jpg">
            </a>
            <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
              <img alt="Image placeholder" src="../../assets/img/team-2.jpg">
            </a>
            <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
              <img alt="Image placeholder" src="../../assets/img/team-3.jpg">
            </a>
            <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
              <img alt="Image placeholder" src="../../assets/img/team-4.jpg">
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- initialization script for tooltips -->
    <script>
      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
      })
    </script>

Avatar Size

Copy

    <div class="container py-6">
      <div class="row mt-5 text-center">
        <div class="col-12">
          <a href="javascript:;" class="avatar avatar-xs rounded-circle">
            <img alt="Image placeholder" src="../../assets/img/team-4.jpg">
          </a>
          <a href="javascript:;" class="avatar avatar-sm rounded-circle">
            <img alt="Image placeholder" src="../../assets/img/team-4.jpg">
          </a>
          <a href="javascript:;" class="avatar rounded-circle">
            <img alt="Image placeholder" src="../../assets/img/team-4.jpg">
          </a>
          <a href="javascript:;" class="avatar avatar-lg rounded-circle">
            <img alt="Image placeholder" src="../../assets/img/team-4.jpg">
          </a>
          <a href="javascript:;" class="avatar avatar-xl rounded-circle">
            <img alt="Image placeholder" src="../../assets/img/team-4.jpg">
          </a>
        </div>
      </div>
    </div>