Feature List - section

You can use this section layout to showcase features, important points. It uses Bootstrap 4 Media Block.

home page

CODE

Here is the HTML code to obtain it. Embed it within the main tag with class page-main.

HTML
<div class="section section-list-feature bg-primary bg-gradient-primary" data-section="feature-row">
  <!-- Begin of section wrapper -->
  <div class="section-wrapper twoside padding-top padding-bottom">
    <!-- title -->
    <div class="section-title text-center">
      <h2 class="display-4 display-title">More Features</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet malesuada feugiat.</p>
    </div>

    <!-- text or illustration order are manipulated via Bootstrap order-md-1, order-md-2 class -->
    <!-- begin of item -->
    <div class="item row justify-content-between">
      <!-- begin of column content -->
      <div class="col-12 col-md-6 col-lg-4">
        <!-- content -->
        <div class="section-content anim">
          <!-- a media object -->
          <div class="media sr-up-td2">
            <div class="img d-flex mr-3">
              <img class="icon" src="img/icons/icon1.svg" alt="An image">
            </div>
            <div class="media-body">
              <h4>Responsive</h4>
              <p>Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
                turpis.</p>
            </div>
          </div>
          <!-- a media object -->
          <div class="media sr-up-td3">
            <div class="img d-flex mr-3">
              <img class="icon" src="img/icons/icon2.svg" alt="An image">
            </div>
            <div class="media-body">
              <h4>Framework</h4>
              <p>Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
                turpis.</p>
            </div>
          </div>
          <!-- a media object -->
          <div class="media sr-up-td4">
            <div class="img d-flex mr-3">
              <img class="icon" src="img/icons/icon3.svg" alt="An image">
            </div>
            <div class="media-body">
              <h4>Modern</h4>
              <p>Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
                turpis.</p>
            </div>
          </div>
        </div>
      </div>
      <!-- end of column content -->

      <!-- begin of column content -->
      <div class="col-12 col-md-6 col-lg-4">
        <!-- content -->
        <div class="section-content anim">
          <!-- a media object -->
          <div class="media sr-up-td2">
            <div class="img d-flex mr-3">
              <i class="icon fa fa-columns"></i>
            </div>
            <div class="media-body">
              <h4>Flexbox</h4>
              <p>Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
                turpis.</p>
            </div>
          </div>
          <!-- a media object -->
          <div class="media sr-up-td3">
            <div class="img d-flex mr-3">
              <i class="icon fa fa-code"></i>
            </div>
            <div class="media-body">
              <h4>Prebuild</h4>
              <p>Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
                turpis.</p>
            </div>
          </div>
          <!-- a media object -->
          <div class="media sr-up-td4">
            <div class="img d-flex mr-3">
              <i class="icon fa fa-arrows-alt"></i>
            </div>
            <div class="media-body">
              <h4>Mobile ready</h4>
              <p>Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
                turpis.</p>
            </div>
          </div>
        </div>
      </div>
      <!-- end of column content -->
    </div>
    <!-- end of item -->

  </div>
  <!-- End of section wrapper -->
</div>

It uses Bootstrap 4 Media block to represents the feature with icon :

<!-- a media object -->
<div class="media sr-up-td2">
  <div class="img d-flex mr-3">
    <i class="icon text-primary text-gradient-primary ion ion-code-working"></i>
  </div>
  <div class="media-body">
    <h4 class="text-primary">Media Element</h4>
    <p>This is a Bootstrap 4 Media object. Use it to showcase a feature or replace it with your awesome call
      to action text.
    </p>
  </div>
</div>