LESSON 10.4

Bootstrap Grid System

Build responsive multi-column layouts without writing media queries

Learn how the Bootstrap 12-column grid works, how to create equal and uneven column layouts, and how columns stack automatically on mobile.

💡 The Concept

Now that you have Bootstrap installed (see Getting Started with Bootstrap if you need help with that), you can use it for a wide range of features: hamburger menus for mobile, dropdown menus, popups, and accordions. The most everyday use, though, is the grid system for stacking columns on mobile devices.

Bootstrap’s grid system divides every row into twelve equal units. Columns sit side by side on larger screens and automatically stack vertically on mobile. No media queries required.

The Three Building Blocks

  • Container: wraps everything and centers it. I recommend using .container-fluid for full-width layouts. (You can also use .container for a fixed-width centered layout.)
  • Row: a horizontal group of columns. Always place columns inside a row.
  • Column: defines how wide each piece of content is, out of 12 units. We’ll cover how to write the column classes below.

The code looks like this:

<div class="container-fluid"><!--This sets up the container-->
   <div class="row"><!--This starts a new row-->
      <div class="col-md-12"><!--This creates a column-->
         <!--Content goes here-->
      </div>
   </div>
</div>

The graphic below shows you the code for one row with three columns and one row with two columns.

Diagram of the Bootstrap 12-column grid showing how columns divide a row

Column Class Syntax

This graphic shows how to construct the classes for bootstrap columns. They start with col, for columns, then the middle section is the breakpoint for stacking, and the third column is the parts of 12 for this column.

Column classes follow this pattern: col-{breakpoint}-{number}. Each class has three segments separated by hyphens.

First Segment: col

Every column class starts with col. This tells Bootstrap that the div is a column in the grid.

Second Segment: Breakpoint

The breakpoint is the minimum screen width at which columns display side by side. Below that width they stack. I recommend col-md- for most layouts in this course.

  • col-sm-: side by side at 576px and wider
  • col-md-: side by side at 768px and wider
  • col-lg-: side by side at 992px and wider
  • col-xl-: side by side at 1200px and wider

Third Segment: Parts of Twelve

The number tells Bootstrap how many of the 12 units this column takes up. The numbers in a row must always add up to 12:

This is a screenshot showing a variety of column options, including 3 columns with col-md-4, 4 columns with col-md-3 and two unequal columns.

Three Equal Columns

<div class="container">
   <div class="row">
      <div class="col-md-4">Column 1</div>
      <div class="col-md-4">Column 2</div>
      <div class="col-md-4">Column 3</div>
   </div>
</div>
Three equal Bootstrap columns displayed side by side

Uneven Layouts

Any combination that adds up to 12 works. A common layout is a wide main content area with a narrower sidebar:

<div class="container">
   <div class="row">
      <div class="col-md-8">Main Content</div>
      <div class="col-md-4">Sidebar</div>
   </div>
</div>
Bootstrap 8/4 column layout showing a two-thirds main area and one-third sidebar

Stacking on Mobile

When the screen is narrower than your breakpoint, Bootstrap automatically stacks the columns vertically. No extra CSS needed.

Bootstrap columns stacking vertically on a mobile screen

Exercise: Try It Yourself

Step 1. Open JSFiddle. Unlike a real webpage where the stylesheet link goes in the <head> and the script goes at the end of the <body>, in JSFiddle you can paste both at the very top of the HTML panel. Add these two lines:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Step 2. Copy the following CSS into the CSS panel:

.col-md-4 p, .col-md-3 p, .col-md-9 p, .col-md-8 p {
   background-color: blue;
   height: 50px;
   width: 100%;
   margin: 5px;
   padding: 12px;
   color: white;
   text-align: center;
}

Step 3. Using the starter code below and the image as your guide, build the column layout in the HTML panel:

<div class="container-fluid">
   <div class="row">
      <div class="col-md-4">
         <p>This is a col-md-4</p>
      </div>
   </div>
</div>
Bootstrap column exercise answer key showing rows of blue columns in various widths

Feeling stuck? The answer key is below. Try to do it by thinking about it before looking at the answer.

Answer key showing the HTML code for the Bootstrap columns exercise

★ Key Takeaways

Bootstrap’s column system makes it easy to create multi-column layouts that work on any screen size. This lesson covered how the 12-column grid works and how to build column classes using the three-part syntax: col, breakpoint, and parts of twelve. Next, you will explore more of what Bootstrap can do, including responsive images, forms, modals, hamburger navigation, and accordions.

❓ Frequently Asked Questions

What do I do if my client wants 5 columns?

Five does not divide evenly into 12, so there is no numbered col class that works. Bootstrap 5 solves this with its auto-layout col class. Instead of specifying a number, just use col on each column. Bootstrap divides the row equally among however many col columns are in the row, so five col divs each get 20% of the width.

What if I only want one column? Do I still need to use the Bootstrap grid?

Yes. Bootstrap grid classes include built-in padding and margin that keep your rows consistently spaced. Even a single-column row benefits from that spacing. For a full-width single column, use col-md-12.

Next Lesson: What Else Can Bootstrap Do?

← Back to Bootstrap and Frameworks Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons