Arguably, columns are the most important piece of the grid system. Rows exist within containers, and those rows are split up into 12 equal columns. Before we get into the nitty-gritty details, let's take a look at an example by taking the first step to create the print sizes section of MyPhoto. There will be 12 print sizes offered. Let's list those sizes horizontally:
<div class="container"> <h1>Our Print Sizes</h1> <div class="row"> <div class="col-sm-1">6x5</div> <div class="col-sm-1">8x10</div> <div class="col-sm-1">11x17</div> <div class="col-sm-1">12x18</div> <div class="col-sm-1">16x20</div> <div class="col-sm-1">18x24</div> <div class="col-sm-1">19x27</div> <div class="col-sm-1">20x30</div> <div class="col-sm-1">22x28</div> ...