Nesting

Not only does the grid system split rows horizontally into columns, it also allows you to split the columns vertically, by supporting nested rows. These nested rows themselves are split into 12 columns within the space provided by the parent column. There is nothing special needed in terms of markup to achieve row inception. All that is needed to achieve this is to nest the elements appropriately and apply the row and column classes.

Let's organize our print sizes into the relevant categories. We want 12 size options split equally into four size categories. Each category will contain one row element, with each print size taking up one column in the grid. Let's try the following:

<div class="container">
   <h1>Our Print Sizes</h1>
   <div class="row">
      <div class="col-6 col-sm-3">
         <h5>Small</h5>
         <div class="row">
            <div class="col-sm-4">6x5</div>
            <div class="col-sm-4">8x10</div>
            <div class="col-sm-4">11x17</div>
         </div>
      </div>
      <div class="col-6 col-sm-3">
         <h5>Medium</h5>
         <div class="row">
            <div class="col-sm-4">12x18</div>
            <div class="col-sm-4">16x20</div>
            <div class="col-sm-4">18x24</div>
         </div>
      </div>
      <div class="col-6 col-sm-3">
         <h5>Large</h5>
         <div class="row">
            <div class="col-sm-4">19x27</div>
            <div class="col-sm-4">20x30</div>
            <div class="col-sm-4">22x28</div>
         </div>
      </div>
      <div class="col-6 col-sm-3">
         <h5>Extra Large</h5>
         <div class="row">
            <div class="col-sm-4">24x36</div>
            <div class="col-sm-4">27x39</div>
            <div class="col-sm-4">27x40</div>
         </div>
      </div>
   </div>
</div>

This produces a set of nested print sizes, as illustrated in figure 2.10:

Within our category columns, we have nested a row. We split each row into three equal columns for viewports larger than or equal to 576 px wide, using col-sm-4, to display the print sizes. Typically, it is good practice to ensure that the sum total of columns defined within the nested rows doesn't exceed the 12 columns allocated, as Bootstrap applies widths based on the assumption of 12 columns. Exceeding the 12 columns may result in unequal or unexpected column widths. However, on some occasions, you may want to force a column onto another line at certain resolutions, where, for example, the text content of columns may slightly overlap at certain resolutions.

In that case, we would like to force certain columns onto another line at a small resolution. To do this, we add col-md-* classes and give the columns requiring a new line at 576 px the col-sm-12 class. Let's force the third size in the Large category onto its own line and force all Extra Large sizes onto separate lines. Let's try the following:

<div class="col-6 col-sm-3">
   <h5>Large</h5>
   <div class="row">
      <div class="col-sm-12">19x27</div>
      <div class="col-sm-12">20x30</div>
      <div class="col-sm-12 col-md-4">22x28</div>
   </div>
</div>
<div class="col-6 col-sm-3">
   <h5>Extra Large</h5>
   <div class="row">
      <div class="col-sm-12 col-md-4">24x36</div>
      <div class="col-sm-12 col-md-4">27x39</div>
      <div class="col-sm-12 col-md-4">27x40</div>
   </div>
</div>

Take a look at figure 2.11:

That's nice and neat. If you have been paying attention, then you will have noted that we do not actually need to define the resolutions below Medium if we want the elements to have separate lines, as this is the default behavior. We will only need to define it if we wanted a resolution below that (such as xs) to have a different behavior. So, this does the trick:

<div class="col-6 col-sm-3">
   <h5>Large</h5>
   <div class="row">
      <div class="col-sm-4">19x27</div>
      <div class="col-sm-4">20x30</div>
      <div class="col-md-4">22x28</div>
   </div>
</div>
<div class="col-6 col-sm-3">
   <h5>Extra Large</h5>
   <div class="row">
      <div class="col-md-4">24x36</div>
      <div class="col-md-4">27x39</div>
      <div class="col-md-4">27x40</div>
   </div>
</div>