Book Image

Bootstrap Site Blueprints

Book Image

Bootstrap Site Blueprints

Overview of this book

Table of Contents (16 chapters)
Bootstrap Site Blueprints
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Beautifying the features list


With icons, titles, and short descriptions, our features section currently looks like the following screenshot in a wide viewport:

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>
   ...

Note

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. With _page-contents.less opened in your editor, add a new section with a comment for our #features section.

    ...