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 how you would code a five-row layout:
<div class="container">
<div class="row">
<!-- insert column code here //-->
</div>
<div class="row">
<!-- insert column code here //-->
</div>
<div class="row">
<!-- insert column code here //-->
</div>
<div class="row">
<!-- insert column code here //-->
</div>
<div class="row">
<!-- insert column code here //-->
</div>
</div>
Like the container class, rows are also a CSS class, so they can be reused as many times as you like on a single page template.