O'Reilly logo

Mastering Bootstrap 4 - Second Edition by Jason Marah, Benjamin Jakobus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required