O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Beautifying the features list

We need to enlarge the icons, align the text at the center, and iron out the grid layout. Let's review the markup structure for the features list:

<section id="features"> 
  <div class="container"> 
    <h1>Features</h1> 
    <div class="row"> 
      <div class="features-item col-md-4"> 
        <span class="icon fa fa-cloud"></span> 
        <h2>Feature 1</h2> 
        <p>Donec id elit non mi porta gravida at eget metus. Fusce            dapibus, tellus ac cursus commodo. </p> 
      </div> 
   ... 

Each feature with its icon, heading, and paragraph is wrapped in a div tag with two classes: features-item and col-md-4.

With this in mind, let's write the styles we need:

  1. Create scss/includes/_features.scss, a new Sass partial, and do not forget to import it in the scss/app.scss file:
     @import ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required