<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid px-5 mx-auto"> <div class="row justify-content-center"> <div class="col-12 text-center mb-0"> <h5 id="heading" class="mb-0">Our Team</h5> </div> </div> <div class="row justify-content-center"> <div class="col-12 text-center mb-5"> <div class="line mx-auto"></div> </div> </div> <div class="row justify-content-center"> <div class="col-md-4"> <div class="row"> <div class="col-md-8"> <div class="image"><img src="https://i.imgur.com/RCwPA3O.jpg" class="fit-image"></div> <p class="mt-2 text-center image-name">Alissa (Lead Designer)</p> </div> <div class="col-md-4"></div> </div> <div class="row"> <div class="gap"></div> </div> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"> <div class="image bottom-image"><img src="https://i.imgur.com/Enygcf8.jpg" class="fit-image"></div> <p class="mt-2 text-center image-name">Rob Joe (Designer)</p> </div> </div> </div> <div class="col-md-4"> <div class="row justify-content-center"> <div class="col-md-8 vertical-center"> <div class="image"><img src="https://i.imgur.com/RjoisAK.jpg" class="fit-image"></div> <p class="mt-2 text-center image-name">John Doe (CEO)</p> </div> </div> </div> <div class="col-md-4"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"> <div class="image"><img src="https://i.imgur.com/K1IiLJw.jpg" class="fit-image"></div> <p class="mt-2 text-center image-name">Lina Jose (Architect)</p> </div> </div> <div class="row"> <div class="gap"></div> </div> <div class="row"> <div class="col-md-8"> <div class="image bottom-image"><img src="https://i.imgur.com/6tPhTUn.jpg" class="fit-image"></div> <p class="mt-2 text-center image-name">Stephanie (Designer)</p> </div> <div class="col-md-4"></div> </div> </div> </div> </div>

.container-fluid { padding-top: 50px; padding-bottom: 80px; background-color: maroon; color: #ffffff } #heading { font-size: 40px; margin-top: 40px; font-weight: normal; font-family: Century Gothic } .line { background-color: #ffffff; border-radius: 50px; border: none; padding: 2px; height: 4px; width: 100px; margin-top: 5px } .vertical-center { margin: 0; position: absolute; top: 45%; -ms-transform: translateY(-45%); transform: translateY(-45%) } @media (max-width: 768px) { .vertical-center { margin: 0; position: relative; top: 0; -ms-transform: translateY(0); transform: translateY(0) } } .gap { height: 130px } @media (max-width: 768px) { .gap { height: 0 } } .image { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto } img { width: 150px; height: 150px; border-radius: 50% } .image-name { font-weight: bold } .fit-image { width: 100%; object-fit: cover }