This file's HTML is copied and adapted from the Bootstrap 4 introduction. It uses Bootstrap's distinctive row and column classes.
Every column below uses class="col-md-3", creating four columns across the 12-column grid. Resize this page to view the column behavior.
A typical Bootstrap layout is wrapped in a DIV with the "container" class.
Inside the container DIV, we add other DIVs to wrap rows and columns. This is the core of Bootstrap's grid system ← that page explains it well. Keep in mind, columns must be inside rows.
class="col" — This is allowed (no breakpoint is specified, and no number of columns is specified), but results might be poor with multiple columns in a row.
class="col-sm" — "Grid columns without a set width will automatically lay out with equal widths. For example, four instances of .col-sm will each automatically be 25% wide for small breakpoints.
class="col-sm-4" — "Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns, you can use .col-sm-4." Note that the 12-column standard means using a width of "4" gives us three columns in a row. Using a width of "6" gives us two columns in a row.
class="col-sm-4 col-md-3" — Column classes can be combined in this way to create different layouts for different device widths. The 12-column standard means we'll have three columns in a row on small devices and four columns in a row on medium and larger devices.