<!-- Left aligned -->
<div class="team-member">
<div class="team-avatar">
<img src="path-to-image" class="rounded-circle" alt="Team member avatar">
</div>
<h3 class="team-title">William Smith</h3>
<p class="team-text">CEO, Co-founder at Company Ltd.</p>
<a href="#" class="social-btn sb-facebook mr-2" data-toggle="tooltip" title="Facebook">
<i class="flaticon-facebook"></i>
</a>
<a href="#" class="social-btn sb-twitter mr-2" data-toggle="tooltip" title="Twitter">
<i class="flaticon-twitter"></i>
</a>
<a href="#" class="social-btn sb-linkedin" data-toggle="tooltip" title="LinkedIn">
<i class="flaticon-linkedin"></i>
</a>
</div>
<!-- Center aligned -->
<div class="team-member text-center">
<div class="team-avatar">
<img src="path-to-image" class="rounded-circle" alt="Team member avatar">
</div>
<h3 class="team-title">Amanda Gallaher</h3>
<p class="team-text">Chief of Marketing at Company Ltd.</p>
<a href="#" class="social-btn sb-twitter mx-1" data-toggle="tooltip" title="Twitter">
<i class="flaticon-twitter"></i>
</a>
<a href="#" class="social-btn sb-messenger mx-1" data-toggle="tooltip" title="Messenger">
<i class="flaticon-messenger"></i>
</a>
<a href="#" class="social-btn sb-facebook mx-1" data-toggle="tooltip" title="Facebook">
<i class="flaticon-facebook"></i>
</a>
</div>// Left aligned
.team-member
.team-avatar
img.rounded-circle(src="path-to-image", alt="Team member avatar")
h3.team-title William Smith
p.team-text CEO, Co-founder at Company Ltd.
a(href="#", data-toggle="tooltip", title="Facebook").social-btn.sb-facebook.mr-2
i.flaticon-facebook
a(href="#", data-toggle="tooltip", title="Twitter").social-btn.sb-twitter.mr-2
i.flaticon-twitter
a(href="#", data-toggle="tooltip", title="LinkedIn").social-btn.sb-linkedin
i.flaticon-linkedin
// Center aligned
.team-member.text-center
.team-avatar
img.rounded-circle(src="path-to-image", alt="Team member avatar")
h3.team-title Amanda Gallaher
p.team-text Chief of Marketing at Company Ltd.
a(href="#", data-toggle="tooltip", title="Twitter").social-btn.sb-twitter.mx-1
i.flaticon-twitter
a(href="#", data-toggle="tooltip", title="Messenger").social-btn.sb-messenger.mx-1
i.flaticon-messenger
a(href="#", data-toggle="tooltip", title="Facebook").social-btn.sb-facebook.mx-1
i.flaticon-facebook
<!-- Avatar on the left -->
<div class="team-member d-flex">
<div class="team-avatar mr-3">
<img src="path-to-image" class="rounded-circle" alt="Team member avatar">
</div>
<div class="team-body pt-2">
<h3 class="team-title">William Smith</h3>
<p class="team-text">CEO, Co-founder at Company Ltd.</p>
<a href="#" class="social-btn sb-facebook mr-2" data-toggle="tooltip" title="Facebook">
<i class="flaticon-facebook"></i>
</a>
<a href="#" class="social-btn sb-twitter mr-2" data-toggle="tooltip" title="Twitter">
<i class="flaticon-twitter"></i>
</a>
<a href="#" class="social-btn sb-google-plus" data-toggle="tooltip" title="Google Plus">
<i class="flaticon-google-plus"></i>
</a>
</div>
</div>
<!-- Avatar on the right -->
<div class="team-member d-flex text-right">
<div class="team-body pt-2">
<h3 class="team-title">Amanda Gallaher</h3>
<p class="team-text">Chief of Marketing at Company Ltd.</p>
<a href="#" class="social-btn sb-twitter mx-1" data-toggle="tooltip" title="Twitter">
<i class="flaticon-twitter"></i>
</a>
<a href="#" class="social-btn sb-messenger mx-1" data-toggle="tooltip" title="Messenger">
<i class="flaticon-messenger"></i>
</a>
<a href="#" class="social-btn sb-facebook mx-1" data-toggle="tooltip" title="Facebook">
<i class="flaticon-facebook"></i>
</a>
</div>
<div class="team-avatar ml-3">
<img src="path-to-image" class="rounded-circle" alt="Team member avatar">
</div>
</div>// Avatar on the left
.team-member.d-flex
.team-avatar.mr-3
img.rounded-circle(src="path-to-image", alt="Team member avatar")
.team-body.pt-2
h3.team-title William Smith
p.team-text CEO, Co-founder at Company Ltd.
a(href="#", data-toggle="tooltip", title="Facebook").social-btn.sb-facebook.mr-2
i.flaticon-facebook
a(href="#", data-toggle="tooltip", title="Twitter").social-btn.sb-twitter.mr-2
i.flaticon-twitter
a(href="#", data-toggle="tooltip", title="Google Plus").social-btn.sb-google-plus
i.flaticon-google-plus
// Avatar on the right
.team-member.d-flex.text-right
.team-body.pt-2
h3.team-title Amanda Gallaher
p.team-text Chief of Marketing at Company Ltd.
a(href="#", data-toggle="tooltip", title="Twitter").social-btn.sb-twitter.mx-1
i.flaticon-twitter
a(href="#", data-toggle="tooltip", title="Messenger").social-btn.sb-messenger.mx-1
i.flaticon-messenger
a(href="#", data-toggle="tooltip", title="Facebook").social-btn.sb-facebook.mx-1
i.flaticon-facebook
.team-avatar.ml-3
img.rounded-circle(src="path-to-image", alt="Team member avatar")
<!-- Style 2 (inside card) -->
<div class="card team-member">
<div class="card-body text-center">
<div class="team-avatar">
<img src="path-to-image" class="rounded-circle" alt="Team member avatar">
</div>
<h3 class="team-title">Benjamin Miller</h3>
<p class="team-text mb-2">Lead Accountant at Company Ltd.</p>
<ul class="list-unstyled pb-2">
<li class="font-size-sm">
<i class="text-muted mr-1" data-feather="phone" style="width: 14px; height: 14px;"></i>
<a href="tel:00331697720" class="nav-link-inline">00 33 169 7720</a>
</li>
<li class="font-size-sm">
<i class="text-muted mr-1" data-feather="mail" style="width: 14px; height: 14px;"></i>
<a href="mailto:ben.miller@example.com" class="nav-link-inline">ben.miller@example.com</a>
</li>
</ul>
<a href="#" class="social-btn sb-facebook mx-1" data-toggle="tooltip" title="Facebook">
<i class="flaticon-facebook"></i>
</a>
<a href="#" class="social-btn sb-twitter mx-1" data-toggle="tooltip" title="Twitter">
<i class="flaticon-twitter"></i>
</a>
<a href="#" class="social-btn sb-skype mx-1" data-toggle="tooltip" title="Skype">
<i class="flaticon-skype"></i>
</a>
</div>
</div>// Style 2 (inside card)
.card.team-member
.card-body.text-center
.team-avatar
img(src="path-to-image", alt="Team member avatar").rounded-circle
h3.team-title Benjamin Miller
p.team-text.mb-2 Lead Accountant at Company Ltd.
ul.list-unstyled.pb-2
li.font-size-sm
i.text-muted.mr-1(data-feather="phone", style="width: 14px; height: 14px;")
a.nav-link-inline(href="tel:00331697720") 00 33 169 7720
li.font-size-sm
i.text-muted.mr-1(data-feather="mail", style="width: 14px; height: 14px;")
a.nav-link-inline(href="mailto:ben.miller@example.com") ben.miller@example.com
a(href="#", data-toggle="tooltip", title="Facebook").social-btn.sb-facebook.mx-1
i.flaticon-facebook
a(href="#", data-toggle="tooltip", title="Twitter").social-btn.sb-twitter.mx-1
i.flaticon-twitter
a(href="#", data-toggle="tooltip", title="Skype").social-btn.sb-skype.mx-1
i.flaticon-skype