The Bootstrap Grid System

Modern websites are made with rows and columns for good reason…we need the columns in a desktop layout to stack on mobile devices. You want your website to look great on a large screen, and that requires that you build a wide design. But, you also need your website to look great on very narrow screens, like a smartphone. Stacking columns, like we can achieve with the Bootstrap Grid System, are the practical solution to this problem.

Keep in mind that over half of viewers on your website will be reading your website on a mobile device. Stacking the columns provides a simple solution to making designs that work on wide desktop screens and narrow mobile devices.

When I first learned how to incorporate Bootstrap columns into my websites, I noticed a dramatic improvement in my web designs. Before using Bootstrap, I struggled to make professional designs that looked great both on desktop and mobile, and the design compromises I was making sacrificed the viewing experience on all sizes. In some cases I even created two web pages in order load a different page on mobile vs. on desktop. Learning to apply the Bootstrap Grid System was an epiphany for me.

This is the magic of the Bootstrap Grid System

When setting up the website content in rows and columns, Bootstrap automatically stacks the content for you on mobile.

Theoretically, you could do the same layout work with floats and media queries, but why? Bootstrap is doing the work for you.

So, how do you incorporate the Bootstrap Grid System into your website?

First you need to install the Bootstrap framework on to your website. Since Bootstrap is both a CSS and JavaScript framework, you need to add CSS links and JavaScript scripts to your website.

<!-- Latest compiled and minified CSS - this goes into the website head above your CSS stylesheet link. It is important to place this link ABOVE your CSS link, so that your CSS supersedes the Bootstrap CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">


<!-- Add the jQuery library, Popper JS, and Bootstrap JS before your closing body tag -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"><script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

Now that you have these references to the Bootstrap files on your website, you can use all of the Bootstrap built in classes to create stacking columns on your website.

Containers, Rows and Columns

To use the Bootstrap columns, you must also use the Bootstrap rows and containers. This graphic shows how the code goes together. The columns must be in either <div class=”container”> or <div class=”container-fluid”>. To start a new row, use <div class=”row”>. The columns are a bit more complex, but in the example below I show the classes to use to make three columns or two columns. In short, the columns are based on a grid system of 12 parts. When you use the class col-sm-4, it will be 4 parts of 12, and when you use col-sm-6, it will be 6 parts of 12.

The code looks like this:

<div class="container-fluid">
   <div class="row">
      <div class="col-sm-4">
         <p>This is my first column</p>
      </div>
    <div class="col-sm-4">
         <p>This is my second column</p>
      </div>
    <div class="col-sm-4">
         <p>This is my third column</p>
      </div>
   </div>
</div>

This code creates equally-sized columns that will stack on mobile.

To learn more about Bootstrap Columns, I recommend heading over to W3 Schools explanation of the Bootstrap Grid System.

WordPress Page Builders and Grid Systems

While this article describes how to hand-code columns using the Bootstrap grid system, use of the grid system goes beyond hand-coded websites. The same grid systems are used in WordPress page builders. I have a separate training program on how to use the Beaver Builder Page Builder to set up rows and columns on your website.

---

This article assumes that you already know HTML and CSS. If you are interested in learning HTML and CSS, head on over to see the HTML and CSS Curriculum. If you don’t know where to start, feel free to contact me at susan@saintpaul.edu, and I’ll help you get started.