<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/james.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/michael.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/emily.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/emilyz.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>

<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/james.jpg">
      </a>
      <a href="javascript:;" class="avatar avatar-sm rounded-circle">
        <img alt="Image placeholder" src="../../assets/img/michael.jpg">
      </a>
      <a href="javascript:;" class="avatar rounded-circle">
        <img alt="Image placeholder" src="../../assets/img/emily.jpg">
      </a>
      <a href="javascript:;" class="avatar avatar-lg rounded-circle">
        <img alt="Image placeholder" src="../../assets/img/emilyz.jpg">
      </a>
      <a href="javascript:;" class="avatar avatar-xl rounded-circle">
        <img alt="Image placeholder" src="../../assets/img/olivia.jpg">
      </a>
    </div>
  </div>
</div>