Styling the features

Directly under the hero unit, the design shows three features. A single feature may look like that shown in the following screenshot. Each feature starts with a rounded image, which may contain a photo or icon followed by a heading and a text paragraph. At the end, you will find a button which is a Call to action.

On screens smaller than 768 pixels, the features should display under each other. On wider screens, the features become horizontal and form three equal width columns like those shown in the following screenshot:

Again we create two files: the html/includes/features.html HTML template and a scss/includes/_features.scss Sass partial.

The structure of the HTML code in the html/includes/features.html HTML template may look like the following (notice that in the HTML code, the features are left out):

    <div class="container features"> 
      <div class="row"> 
        <div class="col-md-4"> 
          <!-- first feature --> ...