Bootstrap snippet and html example. bs4 team list

<div class="container py-7">
  <h2 class="text-uppercase text-letter-spacing-xs my-0 text-dark font-weight-bold">
    Our Team <i class="ion-ios-body pl-1 text-primary op-8 z-index-1"></i>
  </h2>
  <hr class="hr-primary w-15 hr-xl ml-0 mb-5">
  <div class="row mb-5">
    <div class="col-md-6 order-md-2">
      <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Personal Trainer 1" class="img-fluid border-white border-w-5 w-50 w-md-80 w-lg-60 rounded-circle">
    </div>
    <div class="col-md-6 flex-valign text-md-right">
      <h3 class="text-uppercase text-letter-spacing-xs mt-0 mb-1 text-dark font-weight-bold">
        Mike Jones
      </h3>
      <h5 class="my-0 font-weight-normal">
        <em>Strength Coach</em>
      </h5>
      <hr class="hr-primary w-70 ml-0 ml-md-auto mr-md-0 mb-3">
      <p>Aptent dolore enim facilisi humo magna melior nisl occuro. Ad os sed utinam. Accumsan autem brevitas esse exerci ludus ratis.</p>
      <p>Adipiscing nimis sed tego turpis. Abico genitus quadrum qui singularis te.</p>
      <a href="#join" data-toggle="scroll-link" class="text-sm font-weight-bold"><i class="fa fa-chevron-right text-xs text-pink"></i> Train with Mike</a>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-md-6 text-md-right">
      <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Personal Trainer 2" class="img-fluid border-white border-w-5 w-50 w-md-80 w-lg-60 rounded-circle">
    </div>
    <div class="col-md-6 flex-valign">
      <h3 class="text-uppercase text-letter-spacing-xs mt-0 mb-1 text-dark font-weight-bold">
        Kim Kirk
      </h3>
      <h5 class="my-0 font-weight-normal">
        <em>Prenatal Specialist</em>
      </h5>
      <hr class="hr-primary w-70 ml-0 mb-3">
      <p>Commoveo gilvus iaceo nutus pagus tincidunt. Eligo nutus proprius saluto vulputate. Brevitas eligo et fere quadrum quae ratis.</p>
      <p>Eum pecus quis. Accumsan genitus humo inhibeo ut vel. Augue bene enim gemino ideo ille luptatum os veniam venio.</p>
      <a href="#join" data-toggle="scroll-link" class="text-sm font-weight-bold"><i class="fa fa-chevron-right text-xs text-pink"></i> Train with Kim</a>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-md-6 order-md-2">
      <img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Personal Trainer 3" class="img-fluid border-white border-w-5 w-50 w-md-80 w-lg-60 rounded-circle">
    </div>
    <div class="col-md-6 flex-valign text-md-right">
      <h3 class="text-uppercase text-letter-spacing-xs mt-0 mb-1 text-dark font-weight-bold">
        Kurt Marler
      </h3>
      <h5 class="my-0 font-weight-normal">
        <em>CrossFit Trainer</em>
      </h5>
      <hr class="hr-primary w-70 ml-0 ml-md-auto mr-md-0 mb-3">
      <p>Causa dolor et immitto typicus. Gilvus minim nunc pala suscipere tation usitas volutpat. Abbas abdo meus.</p>
      <p>Amet incassum mos quidem refoveo tation usitas vicis vulpes. Abigo accumsan acsi adipiscing esca hendrerit interdico occuro suscipere torqueo.</p>
      <a href="#join" data-toggle="scroll-link" class="text-sm font-weight-bold"><i class="fa fa-chevron-right text-xs text-pink"></i> Train with Kurt</a>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-md-6 text-md-right">
      <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="Personal Trainer 4" class="img-fluid border-white border-w-5 w-50 w-md-80 w-lg-60 rounded-circle">
    </div>
    <div class="col-md-6 flex-valign">
      <h3 class="text-uppercase text-letter-spacing-xs mt-0 mb-1 text-dark font-weight-bold">
        Lina Andrews
      </h3>
      <h5 class="my-0 font-weight-normal">
        <em>Yoga Specialist</em>
      </h5>
      <hr class="hr-primary w-70 ml-0 mb-3">
      <p>Abico diam scisco. Amet conventio ex ille iriure metuo olim probo. Conventio esca incassum metuo ulciscor.</p>
      <p>Abdo appellatio decet jus mauris neque plaga sino wisi ymo.</p>
      <a href="#join" data-toggle="scroll-link" class="text-sm font-weight-bold"><i class="fa fa-chevron-right text-xs text-pink"></i> Train with Lina</a>
    </div>
  </div>
</div>

body{
    background-color:#eee;
    margin-top:20px;
}
.border-5, .border-w-5 {
    border-width: 5px !important;
}
.border-white {
    border: 1px solid transparent;
    border-color: #fff !important;
}
hr.hr-primary {
    border-top-color: #CC164D!important;
}
em {
    font-style: italic;
}
.font-weight-normal {
    font-weight: 400 !important;
}