Building our scaffolding

For our landing page, we will use the grid presented in the following image. As you can see, it is represented by seven rows, each containing a different number of columns. In this first example, we will use a nonmobile viewport, which we will discuss in the next chapter.

Setting things up

To start that, let's use our default layout presented in Chapter 1, Getting Started. Add inside the div.container tag another div with the .row class:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Landing page</title>

    <link rel="stylesheet" href="css/bootstrap.css">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row"></div>
    </div>

    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

The hierarchy for the grid system always follows the sequence of a container that wraps rows and multiple columns. Keep in mind to always use this sequence to get a proper output.

Now that we have our .container with the first .row, let's create our first column. Every row is subdivided into 12 parts, so you can have up to 12 columns in a single row.

To identify a column, we must follow the template of .col-*-*. The first asterisk means the viewport for the column, and the other one means the size of the column. We will explain more about that, but to create our first column, we create a column identified by .col-md-12 inside our row:

<div class="container">
  <div class="row">
    <header class="col-md-12">
      HEADER
    </header>
  </div>
</div>

In this column, the md in.col-md-12 means that for the viewport medium (which means the md identifier), the column must have a 12-column width. In other words, the column fills the entire width of this row. This column will fill the complete width because it is our header, and as we can see in the previous image, this row is composed of just a single row.

So, to create a column in the Bootstrap grid system, you must follow the recipe of .col-*-* for every column. While you can set an integer from 1 to 12 for the width, for the viewport, you must set the correct class prefix. In this table, you can see the breakdown of class prefix usage and on which resolution it can be used:

	Extra small devices (phones < 544 px / 34 em)	Small devices (tablets ≥ 544 px / 34 em and < 768 px / 48 em)	Medium devices (desktops ≥ 768 px /48 em and < 900 px / 62 em)	Large devices (desktops ≥ 900 px / 62 em and < 1,200 px 75 em)	Extra large devices (desktops ≥ 1,200 px / 75 em)
Grid behavior	Horizontal lines at all times	Collapse at start and fit the column grid
Container's fixed width	Auto	`544 px` or `34 rem`	`750 px` or `45 rem`	`970 px` or `60 rem`	`1170 px` or `72.25 rem`
Class prefix	`.col-xs-*`	`.col-sm-*`	`.col-md-*`	`.col-lg-*`	`.col-xl-*`
Number of columns	12
Column fixed width	Auto	`~ 44 px` or `2.75 rem`	`~ 62 px` or `3.86 rem`	`~ 81 px` or `5.06 rem`	`~ 97 px` or `6.06 rem`

Tip

What will happen if I create a row with more than 12 columns?

Try adding a number of columns with a number higher than 12, for instance, five columns with the .col-md-3 class. Knowing that every row is treated as a unit of 12 columns, the next ones will wrap in a new line.

Offset columns

Our second row is divided into three equal-sized columns, and the first one is an offset column, or in other words, an empty column that will be filled by a left margin. Therefore, the second row will be like this:

<div class="row">
  <div class="col-md-offset-4 col-md-4">1/3</div>
  <div class="col-md-4">1/3</div>
</div>

As you can see, by adding the .col-md-offset-4 class, we create a margin to the left four, sized in just this .row. By having each row independent of the others, we can properly customize the layout to appear just as it is supposed to be.

Tip

What happens if I add more than two offsets in a single column?

If you do that, you will find yourself in a funny situation. As a tip, only one offset is applied for an element, but which one? The answer is, the smallest offset!

Completing the grid rows

Now we will advance to the third row in our scaffolding. If you've got the spirit, you should have no problems with this row. For training, try doing it by yourself and check the solution in the book afterwards! I am sure you can handle it.

So, this row is composed of two columns. The first column must fill 4 out of the 12 parts of the row and the other column will fill the rest. The row in the HTML should look like this:

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-8"></div>
</div>

About the fourth row—it is composed of a quarter divisor, followed by a half divisor, followed by a last quarter divisor. Using this in base 12, we will have the following grid in the row:

<div class="row">
  <div class="col-md-3">1/4</div>
  <div class="col-md-6">1/2</div>
  <div class="col-md-3">1/4</div>
</div>

Nesting rows

In the fifth and sixth rows, we will show how you can create a row using two options. In the fifth row, we will create just as we are doing in the other rows, while in the sixth row, we will use the concept of nesting rows.

So, in the fifth row, create it just as you were doing before; create a row with four equally sized rows, which means that each column will have the .col-md-3 class:

<div class="row">
  <div class="col-md-3">1/4</div>
  <div class="col-md-3">1/4</div>
  <div class="col-md-3">1/4</div>
  <div class="col-md-3">1/4</div>
</div>

For the sixth row, we will use nesting rows. So, let's create the first .row, having three columns:

<div class="row">
  <div class="col-md-3">1/4</div>
  <div class="col-md-6"></div>
  <div class="col-md-3">1/4</div>
</div>

As you can see, the first and the last column use the same class of columns in row five—the .col-md-3 class—while the middle column is double the size, with the .col-md-6 class.

Let's nest another .row inside the middle column. When you create a new nested row, the columns inside of it are refreshed and you have another set of 12-sized columns to put inside it. So, inside this new row, create two columns with the .col-md-6 class to generate two columns representing a fourth of the row:

<div class="row">
  <div class="col-md-3">1/4</div>
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-6">1/4</div>
      <div class="col-md-6">1/4</div>
    </div>
  </div>
  <div class="col-md-3">1/4</div>
</div>

The concept of nesting rows is pretty complex, since you can infinitely subdivide a row, although it is great to create small grid components inside your page that can be used in other locations.

Finishing the grid

To create the last row, we need to create the .col-md-2 column, followed by .col-md-7 and .col-md-3. So, just create a row using the <footer> tag with those columns. The complete scaffolding will be this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Landing page</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <!-- row 1 -->
      <div class="row">
        <header class="col-md-12">
          HEADER
        </header>
      </div>

      <!-- row 2 -->
      <div class="row">
        <div class="col-md-offset-4 col-md-4">1/3</div>
        <div class="col-md-4">1/3</div>
      </div>

      <!-- row 3 -->
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-8"></div>
      </div>

      <!-- row 4 -->
      <div class="row">
        <div class="col-md-3">1/4</div>
        <div class="col-md-6">1/2</div>
        <div class="col-md-3">1/4</div>
      </div>

      <!-- row 5 -->
      <div class="row">
        <div class="col-md-3">1/4</div>
        <div class="col-md-3">1/4</div>
        <div class="col-md-3">1/4</div>
        <div class="col-md-3">1/4</div>
      </div>

      <!-- row 6 – nesting rows -->
      <div class="row">
        <div class="col-md-3">1/4</div>
        <div class="col-md-6">
          <div class="row">
            <div class="col-md-6">1/4</div>
            <div class="col-md-6">1/4</div>
          </div>
        </div>
        <div class="col-md-3">1/4</div>
      </div>

      <!-- row 7 -->
      <footer class="row">
        <div class="col-md-2">1/2</div>
        <div class="col-md-7">7/12</div>
        <div class="col-md-3">1/4</div>
      </footer>
    </div>

    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

Previous Chapter

2. Creating a Solid Scaffolding

Next Chapter

Fluid container

Table of Contents for Bootstrap 4 – Responsive Web Design