<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous"> <section class="container mt-4 mb-4"> <div class="container"> <div class="row mb-3"> <div class="col-md-6"> <div class="d-flex flex-row border rounded"> <div class="p-0 w-25"> <img src="https://c1.staticflickr.com/3/2862/12328317524_18e52b5972_k.jpg" class="img-thumbnail border-0" /> </div> <div class="pl-3 pt-2 pr-2 pb-2 w-75 border-left"> <h4 class="text-primary">Leanne Boulton</h4> <h5 class="text-info">Photographer</h5> <ul class="m-0 float-left" style="list-style: none; margin:0; padding: 0"> <li><i class="fab fa-facebook-square"></i> Facebook</li> <li><i class="fab fa-twitter-square"></i> Twitter</li> </ul> <p class="text-right m-0"><a href="#" class="btn btn-primary"><i class="far fa-user"></i> View Profile</a></p> </div> </div> </div> <div class="col-md-6"> <div class="d-flex flex-row border rounded"> <div class="p-0 w-25"> <img src="https://c1.staticflickr.com/3/2862/12328317524_18e52b5972_k.jpg" class="img-thumbnail border-0" /> </div> <div class="pl-3 pt-2 pr-2 pb-2 w-75 border-left"> <h4 class="text-primary">Leanne Boulton</h4> <h5 class="text-info">Photographer</h5> <ul class="m-0 float-left" style="list-style: none; margin:0; padding: 0"> <li><i class="fab fa-facebook-square"></i> Facebook</li> <li><i class="fab fa-twitter-square"></i> Twitter</li> </ul> <p class="text-right m-0"><a href="#" class="btn btn-primary"><i class="far fa-user"></i> View Profile</a></p> </div> </div> </div> </div> </div> </section>