Pictures with text - section

You can use this section layout to showcase features, important points ...

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-twoside bg-white-gray bg-bright" data-section="feature-more-list">
  <!-- Begin of section wrapper -->
  <div class="section-wrapper twoside padding-top padding-bottom">

    <!-- text or illustration order are manipulated via Bootstrap order-md-1, order-md-2 class -->

    <!-- begin of item -->
    <div class="item row mt-0">
      <!-- begin of illustration content -->
      <div class="col-12 col-md-6 order-md-2 center-vh">
        <!-- content -->
        <div class="section-content anim">
          <!-- illustartion -->
          <div class="images text-center">
            <div class="img-frame-normal full img-black">
              <div class="img-1">
                <img class="img" alt="Image" src="img/laptop.png">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end of illustration content -->

      <!-- begin of text content -->
      <div class="col-12 col-md-6 order-md-1 center-vh">
        <!-- content -->
        <div class="section-content anim">
          <div class="media-list">
            <div class="row">
              <div class="col-12">
                <!-- 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>
              </div>

              <div class="col-12">
                <!-- a media object -->
                <div class="media sr-up-td3">
                  <div class="img d-flex mr-3">
                    <i class="icon text-primary text-gradient-primary ion ion-podium"></i>
                  </div>
                  <div class="media-body">
                    <h4 class="text-primary">Multi-Variants</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>
              </div>

              <div class="col-12 mb-3">
                <!-- a media object -->
                <div class="media sr-up-td4">
                  <div class="img d-flex mr-3">
                    <i class="icon text-primary text-gradient-primary ion ion-shuffle"></i>
                  </div>
                  <div class="media-body">
                    <h4 class="text-primary">Fully Customizable</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>
              </div>
            </div>
          </div>

        </div>
      </div>
      <!-- end of text 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>