Bootstrap 4 Team Members Layout Snippet
A Bootstrap 4 layout snippet for team members with rounded images and texts.
by Grobbert
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<section class="team text-center py-5">
<div class="container">
<div class="header my-5">
<h1>Meet our Team </h1>
<p class="text-muted">Meet and Greet our Team Members</p>
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="img-block mb-5">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t4.jpg" class="img-fluid img-thumbnail rounded-circle" alt="image1">
<div class="content mt-2">
<h4>Zain Knob</h4>
<p class="text-muted">Mechanical Engineer</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 ">
<div class="img-block mb-5">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t2.jpg" class="img-fluid img-thumbnail rounded-circle" alt="image1">
<div class="content mt-2">
<h4>Syndia Lee</h4>
<p class="text-muted">Software Engineer</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="img-block mb-5">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t1.jpg" class="img-fluid img-thumbnail rounded-circle" alt="image1">
<div class="content mt-2">
<h4>Noel Flantier</h4>
<p class="text-muted">Forensic Scientist</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="img-block mb-5">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" class="img-fluid img-thumbnail rounded-circle" alt="image1">
<div...