A few weeks ago, we looked at how to how to use CSS Grid and two weeks ago we looked at how to do a grid layout with Bulma.  This week, we revisit Bootstrap for the first time in over five years and look at how to do a grid-based layout with it.

See the Pen
Bootstrap 101: Layout by Joe Steinbring (@steinbring)
on CodePen.

For the example, I tried to imitate what we did with the Bulma example.  You’ll notice that there is still no CSS or JavaScript but the syntax is a bit different.

Bootstrap wants a container, that can be .container, .container-sm, .container-md, .container-lg, .container-xl, or .container-fluid.  You then want to define rows with .row.  The rows are always 12 column widths across, so if you use .col-{number}, then {number} should always be the number of columns divided by the number 12.  You can also use .col-sm-{number}, .col-md-{number}, .col-lg-{number}, .col-xl-{number}, or .col-{number} to write to specific screen sizes.

If you leave .container-fluid and leave out the number from the column class, it should evenly space your columns.

Have any questions, comments, etc?  Leave a comment, below.