Feature box

<div class="row">

  <div class="col-12 col-lg-6">
    <div class="f-box">
      <div class="f-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <div class="col-12 col-lg-6">
    <div class="f-box dark">
      <div class="f-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <div class="col-12 col-lg-6">
    <div class="f-box outline-gray">
      <div class="f-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <div class="col-12 col-lg-6">
    <div class="f-box outline-dark">
      <div class="f-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

</div>

<div class="row">

  <!-- Extra Large -->
  <div class="col-12">
    <div class="f-box f-box-xl">
      <div class="f-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <!-- Large -->
  <div class="col-12">
    <div class="f-box f-box-lg">
      <div class="f-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <!-- Regular(default) -->
  <div class="col-12">
    <div class="f-box">
      <div class="f-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <!-- Small -->
  <div class="col-12">
    <div class="f-box f-box-sm">
      <div class="f-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <!-- Extra Small -->
  <div class="col-12">
    <div class="f-box f-box-xs">
      <div class="f-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

</div>