Columns

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> ...

Get Mastering Bootstrap 4 - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.