Team

<!-- Team Style 1: Left aligned + rounded picture + solid socials -->
<div class="text-start">
  <img src="path-to-image" class="d-inline-block rounded mb-3" width="96" alt="William Smith">
  <h6 class="pt-1 mb-1">William Smith</h6>
  <p class="fs-sm text-muted">CEO, Co-founder at Company Ltd.</p>
  <a href="#" class="btn-social bs-facebook bs-sm">
    <i class="ci-facebook"></i>
  </a>
  <a href="#" class="btn-social bs-twitter bs-sm">
    <i class="ci-twitter"></i>
  </a>
  <a href="#" class="btn-social bs-linkedin bs-sm">
    <i class="ci-linkedin"></i>
  </a>
  <a href="#" class="btn-social bs-google bs-sm">
    <i class="ci-google"></i>
  </a>
</div>

<!-- Team Style 1: Center aligned + round picture + outline socials -->
<div class="text-center">
  <img src="path-to-image" class="d-inline-block rounded-circle mb-3" width="96" alt="Amanda Gallaher">
  <h6 class="pt-1 mb-1">Amanda Gallaher</h6>
  <p class="fs-sm text-muted">Chief of Marketing at Company Ltd.</p>
  <a href="#" class="btn-social bs-twitter bs-outline bs-sm">
    <i class="ci-twitter"></i>
  </a>
  <a href="#" class="btn-social bs-messenger bs-outline bs-sm">
    <i class="ci-messenger"></i>
  </a>
  <a href="#" class="btn-social bs-pinterest bs-outline bs-sm">
    <i class="ci-pinterest"></i>
  </a>
  <a href="#" class="btn-social bs-linkedin bs-outline bs-sm">
    <i class="ci-linkedin"></i>
  </a>
</div>

<!-- Horizontal layout: Picture on the left + rounded picture + solid round socials -->
<div class="d-flex align-items-start">
  <img class="d-inline-block rounded" width="96" src="path-to-image" alt="Jonathan Doe"/>
  <div class="ps-3">
    <h6 class="pt-1 mb-1">Jonathan Doe</h6>
    <p class="fs-sm text-muted">CEO, Co-founder at Company Ltd.</p>
    <a class="btn-social bs-facebook rounded-circle bs-sm me-2 mb-2" href="#">
      <i class="ci-facebook"></i>
    </a>
    <a class="btn-social bs-twitter rounded-circle bs-sm me-2 mb-2" href="#">
      <i class="ci-twitter"></i>
    </a>
    <a class="btn-social bs-linkedin rounded-circle bs-sm me-2 mb-2" href="#">
      <i class="ci-linkedin"></i>
    </a>
    <a class="btn-social bs-google rounded-circle bs-sm me-2 mb-2" href="#">
      <i class="ci-google"></i>
    </a>
  </div>
</div>

<!-- Horizontal layout: Picture on the right + round picture + outline round socials -->
<div class="d-flex align-items-start">
  <div class="text-end pe-3">
    <h6 class="pt-1 mb-1">Barbara Palson</h6>
    <p class="fs-sm text-muted">Chief of Marketing at Company Ltd.</p>
    <a class="btn-social bs-twitter bs-outline rounded-circle bs-sm me-2 mb-2" href="#">
      <i class="ci-twitter"></i>
    </a>
    <a class="btn-social bs-messenger bs-outline rounded-circle bs-sm me-2 mb-2" href="#">
      <i class="ci-messenger"></i>
    </a>
    <a class="btn-social bs-pinterest bs-outline rounded-circle bs-sm me-2 mb-2" href="#">
      <i class="ci-pinterest"></i>
    </a>
    <a class="btn-social bs-linkedin bs-outline rounded-circle bs-sm me-2 mb-2" href="#">
      <i class="ci-linkedin"></i>
    </a>
  </div>
  <img class="d-inline-block rounded-circle" width="96" src="path-to-image" alt="Barbara Palson"/>
</div>

<!-- Card border: Rounded picture + solid socials -->
<div class="card text-center">
  <div class="card-body">
    <img class="d-inline-block rounded mb-3" width="96" src="path-to-image" alt="Benjamin Miller"/>
    <h6 class="pt-1 mb-1">Benjamin Miller</h6>
    <p class="fs-sm text-muted">Lead Accountant at Company Ltd.</p>
    <ul class="fs-sm list-unstyled mb-4">
      <li class="mb-0">
        <i class="ci-phone me-2"></i>
        <a class="nav-link-style" href="tel:00331697720">00 33 169 7720</a>
      </li>
      <li class="mb-0">
        <i class="ci-mail me-2"></i>
        <a class="nav-link-style" href="mailto:ben.miller@example.com">ben.miller@example.com</a>
      </li>
    </ul>
    <a class="btn-social bs-facebook bs-sm me-2 mb-2" href="#">
      <i class="ci-facebook"></i>
    </a>
    <a class="btn-social bs-twitter bs-sm me-2 mb-2" href="#">
      <i class="ci-twitter"></i>
    </a>
    <a class="btn-social bs-linkedin bs-sm me-2 mb-2" href="#">
      <i class="ci-linkedin"></i>
    </a>
    <a class="btn-social bs-google bs-sm me-2 mb-2" href="#">
      <i class="ci-google"></i>
    </a>
  </div>
</div>

<!-- Card shadow: Round picture + outline socials -->
<div class="card text-center border-0 shadow">
  <div class="card-body">
    <img class="d-inline-block rounded-circle mb-3" width="96" src="path-to-image" alt="Richard Williams"/>
    <h6 class="pt-1 mb-1">Richard Williams</h6>
    <p class="fs-sm text-muted">Financial Director at Company Ltd.</p>
    <ul class="fs-sm list-unstyled mb-4">
      <li class="mb-0">
        <i class="ci-phone me-2"></i>
        <a class="nav-link-style" href="tel:00331697720">00 33 169 7720</a>
      </li>
      <li class="mb-0">
        <i class="ci-mail me-2"></i>
        <a class="nav-link-style" href="mailto:r.williams@example.com">r.williams@example.com</a>
      </li>
    </ul>
    <a class="btn-social bs-twitter bs-outline bs-sm me-2 mb-2" href="#">
      <i class="ci-twitter"></i>
    </a>
    <a class="btn-social bs-messenger bs-outline bs-sm me-2 mb-2" href="#">
      <i class="ci-messenger"></i>
    </a>
    <a class="btn-social bs-pinterest bs-outline bs-sm me-2 mb-2" href="#">
      <i class="ci-pinterest"></i>
    </a>
    <a class="btn-social bs-linkedin bs-outline bs-sm me-2 mb-2" href="#">
      <i class="ci-linkedin"></i>
    </a>
  </div>
</div>