Learning Bootstrap 4 - Second Edition

Inserting rows into your layout

The next step in creating a layout is to insert at least a single row of columns. Each container class can have one or more rows nested inside of it. A row defines a collection of horizontal columns that can be broken up to twelve times. The magic number when it comes to columns in Bootstrap is twelve, and you can sub-divide them any way you like. Before we get into columns though, let's review the markup for rows. First let's look at an example of a container with a single row:

<div class="container"> 
   <div class="row"> 
      <!-- insert column code here //--> 
   </div> 
</div> 

As you can see, this is an easy next step in setting up your layout. Like I mentioned, you can have as many rows within a container as you like. Here's ...