<h2 class="text-center py-3">Bootstrap 4 Timeline</h2>

<div class="container py-2 mt-4 mb-4">
  <!-- timeline item 1 -->
  <div class="row no-gutters">
    <div class="col-sm"> <!--spacer--> </div>
    <!-- timeline item 1 center dot -->
    <div class="col-sm-1 text-center flex-column d-none d-sm-flex">
      <div class="row h-50">
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
      <h5 class="m-2">
        <span class="badge badge-pill bg-light border">&nbsp;</span>
      </h5>
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
    </div>
    <!-- timeline item 1 event content -->
    <div class="col-sm py-2">
      <div class="card">
        <div class="card-body">
          <div class="float-right text-muted small">Jan 9th 2019 7:00 AM</div>
          <h4 class="card-title">Day 1 Orientation</h4>
          <p class="card-text">Welcome to the campus, introduction and get started with the tour.</p>
        </div>
      </div>
    </div>
  </div>
  <!--/row-->
  <!-- timeline item 2 -->
  <div class="row no-gutters">
    <div class="col-sm py-2">
      <div class="card">
        <div class="card-body">
          <div class="float-right small">Jan 10th 2019 8:30 AM</div>
          <h4 class="card-title">Day 2 Sessions</h4>
          <p class="card-text">Sign-up for the lessons and speakers that coincide with your course syllabus. Meet and greet with instructors.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-1 text-center flex-column d-none d-sm-flex">
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
      <h5 class="m-2">
        <span class="badge badge-pill bg-light border">&nbsp;</span>
      </h5>
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
    </div>
    <div class="col-sm"> <!--spacer--> </div>
  </div>
  <!--/row-->
  <!-- timeline item 3 -->
  <div class="row no-gutters">
    <div class="col-sm"> <!--spacer--> </div>
    <div class="col-sm-1 text-center flex-column d-none d-sm-flex">
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
      <h5 class="m-2">
        <span class="badge badge-pill bg-light border">&nbsp;</span>
      </h5>
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
    </div>
    <div class="col-sm py-2">
      <div class="card">
        <div class="card-body">
          <div class="float-right text-muted small">Jan 11th 2019 8:30 AM</div>
          <h4 class="card-title">Day 3 Sessions</h4>
          <p>Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch, mumblecore PBR try-hard kale chips. Brooklyn vinyl lumbersexual
            bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache.</p>
        </div>
      </div>
    </div>
  </div>
  <!--/row-->
  <!-- timeline item 4 -->
  <div class="row no-gutters">
    <div class="col-sm py-2">
      <div class="card">
        <div class="card-body">
          <div class="float-right text-muted small">Jan 12th 2019 11:30 AM</div>
          <h4 class="card-title">Day 4 Wrap-up</h4>
          <p>Join us for lunch in Bootsy's cafe across from the Campus Center.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-1 text-center flex-column d-none d-sm-flex">
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
      <h5 class="m-2">
        <span class="badge badge-pill bg-light border">&nbsp;</span>
      </h5>
      <div class="row h-50">
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
    </div>
    <div class="col-sm"> <!--spacer--> </div>
  </div>
  <!--/row-->
</div>

<hr>

<div class="container py-2 mt-4 mb-4">
  <!-- timeline item 1 -->
  <div class="row">
    <!-- timeline item 1 left dot -->
    <div class="col-auto text-center flex-column d-none d-sm-flex">
      <div class="row h-50">
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
      <h5 class="m-2">
        <span class="badge badge-pill bg-light border">&nbsp;</span>
      </h5>
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
    </div>
    <!-- timeline item 1 event content -->
    <div class="col py-2">
      <div class="card">
        <div class="card-body">
          <div class="float-right text-muted">Mon, Jan 9th 2019 7:00 AM</div>
          <h4 class="card-title">Day 1 Orientation</h4>
          <p class="card-text">Welcome to the campus, introduction and get started with the tour.</p>
        </div>
      </div>
    </div>
  </div>
  <!--/row-->
  <!-- timeline item 2 -->
  <div class="row">
    <div class="col-auto text-center flex-column d-none d-sm-flex">
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
      <h5 class="m-2">
        <span class="badge badge-pill bg-light border">&nbsp;</span>
      </h5>
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
    </div>
    <div class="col py-2">
      <div class="card">
        <div class="card-body">
          <div class="float-right">Tue, Jan 10th 2019 8:30 AM</div>
          <h4 class="card-title">Day 2 Sessions</h4>
          <p class="card-text">Sign-up for the lessons and speakers that coincide with your course syllabus. Meet and greet with instructors.</p>
        </div>
      </div>
    </div>
  </div>
  <!--/row-->
  <!-- timeline item 3 -->
  <div class="row">
    <div class="col-auto text-center flex-column d-none d-sm-flex">
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
      <h5 class="m-2">
        <span class="badge badge-pill bg-light border">&nbsp;</span>
      </h5>
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
    </div>
    <div class="col py-2">
      <div class="card">
        <div class="card-body">
          <div class="float-right text-muted">Wed, Jan 11th 2019 8:30 AM</div>
          <h4 class="card-title">Day 3 Sessions</h4>
          <p>Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch, mumblecore PBR try-hard kale chips. Brooklyn vinyl lumbersexual
            bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, Helvetica Williamsburg sartorial tote bag distillery Portland before
            they sold out gastropub taxidermy Vice.</p>
        </div>
      </div>
    </div>
  </div>
  <!--/row-->
  <!-- timeline item 4 -->
  <div class="row">
    <div class="col-auto text-center flex-column d-none d-sm-flex">
      <div class="row h-50">
        <div class="col border-right">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
      <h5 class="m-2">
        <span class="badge badge-pill bg-light border">&nbsp;</span>
      </h5>
      <div class="row h-50">
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
      </div>
    </div>
    <div class="col py-2">
      <div class="card">
        <div class="card-body">
          <div class="float-right text-muted">Thu, Jan 12th 2019 11:30 AM</div>
          <h4 class="card-title">Day 4 Wrap-up</h4>
          <p>Join us for lunch in Bootsy's cafe across from the Campus Center.</p>
        </div>
      </div>
    </div>
  </div>
  <!--/row-->
</div>
<!--container-->