We need some style!

Now, we will start using some of the CSS provided for Bootstrap to make our components responsive and more elegant. Our main goal is to make our grid page like what is shown in this screenshot:

Let's break down each row and learn about typography and some other components. We will do this without using a single custom line of CSS!

Getting started with the first row, you may see that this row has a gray background, which is not present in the rest of the layout. To create this, we must make a change in our grid by creating a new .container for this row. So, create another .container and place it inside the first row:

<div class="container">
  <!-- row 1 -->
  <div class="row">
    <header class="col-md-12">
    </header>
  </div>
</div>
<div class="container">
  <!—- the others rows (2 to 7) -->
</div>

Now, to make the gray area, we will use a class in Bootstrap...