How to Use the Bootstrap Grid

The Right Way

The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside one or more Containers.

The Bootstrap Grid can be used alone, without the Bootstrap JavaScript and other CSS Components. You just need to download and reference the "bootstrap-grid.css" which contains the Grid and Flexbox classes. More info on only using the Bootstrap Grid CSS is here in the docs.


Basic example of using the Grid:

                    
            <div class="container"> 
               <div class="row">
                  <div class="col">I'm your content inside the grid!</div> 
               </div>
            </div>
                    
This gives us one big “column” horizontally across the viewport… Grid 1

2 Columns…

                    
            <div class="container"> 
               <div class="row">
                  <div class="col">Left column</div> 
                  <div class="col">Right column</div> 
               </div>
            </div>
                    
Grid 1

3 Columns…

                    
            <div class="container"> 
               <div class="row">
                  <div class="col">Left column</div> 
                  <div class="col">Middle column</div> 
                  <div class="col">Right column</div> 
               </div>
            </div>
                    
Grid 1

Basic Grid concepts are quickly understood, but you may be wondering why all of this HTML markup is neccessary. You might have some questions like…

Why do I need a Container?
Can I make one column wider than the others?
Do I need to use the Row?

I will address Grid questions like these a little further down. But, first I want to take a step back to explain something very important about using the Grid. Understanding the “Rules of the Grid” will save you a lot of time and frustration. Read them carefully…


The Rules of the Grid:

1. Columns must be the immediate child of a Row.

2. Rows are only used to contain Columns, nothing else.

3. Rows should be placed inside a Container.

Those rules are very IMPORTANT. The Rows & Columns always work together, and you should never have one without the other. Bad stuff will happen if you don’t follow those 3 simple Grid rules, exactly. I’ve answered countless Bootstrap questions on Stack Overflow by simply applying those rules. At first this might sound complicated, but it’s really easy once you understand how the Grid works.


There's a Right Way to Use the Bootstrap Grid...


Container

In the basic examples before you may have noticed that I used the .container class to wrap the .row. The Container is the root (a.k.a: top-level, outermost) element of the Bootstrap Grid.

                    
            <div class="container">  
               <div class="row">  
                  <div class="col">I'm content inside the grid!</div> 
               </div>  
            </div> 
                    

The Container can be used to hold any elements and content. It’s not only used for the Grid Rows & Columns. For example, this is perfectly valid Bootstrap markup:

                    
            <div class="container"> 
               <h2> My Heading</h2>  
               <div class="row">  
                  <div class="col"> I'm content inside the grid!</div>  
               </div> 
            </div> 
                    

At first, the Container may seem trivial or unnecessary, but it’s very important to control width of the layout. The Container is also used to evenly align the left and right edges of the layout within the browser’s viewport.

Bootstrap 4 has 2 types of Containers. In my examples I used .container, but there is also the full-width .container-fluid. You can use either one:

1 — Fixed-width container to center your layout in the middle:
                    
    <div class="container"> </div> 
    
2 — Full-width container for a layout the spans the entire width:
                    
    <div class="container-fluid"> </div> 
    

The .container scales down in width responsively (as the screen width narrows) so that eventually it becomes full-width like the .container-fluid on smaller devices.

Note: A Container can be used to contain any content, not just the Grid Rows & Columns. But, if you do utilize the Grid Rows & Columns, the Rows should be placed inside a Container. Try the Container demo on Codeply

When utilizing the Grid, one more Rows will be placed inside the Container. You can have multiple Rows in a Container, and you can have multiple Containers on one page. It all depends on what layout you’re trying to accomplish, but don’t get too concerned with that yet.

It’s important that a Container is used to contain grid Rows (.row).

Rows have a negative left/right margin of -15px. The Container padding of 15px is used to counteract the negative margins of the Row. This is to keep content evenly aligned on the edges of the layout. If you don’t put a Row in a Container, the Row will overflow it’s container, causing an undesirable horizontal scroll.


Rows & Columns

Notice that I've grouped "Rows & Columns" together in a single section for this article. This is because you can't have one without the other as explained earlier in the "Rules of the Grid".

For a while now I've wished that the Bootstrap .row wasn't actually named "row". The name "row" is often misleading, and obscures the actual purpose of the .row. When you think "row", you probably think horizontal line, which is okay, BUT, it's better to think of the .row simply as a parent of columns.

Think of the Row as a group of Columns This is because columns inside the .row aren't always laid-out horizontally across the viewport. Some times we want the column layout to be horizontal, while other times we want the columns to layout vertically down the viewport. The concept of horizontal vs. vertical layout is the essence of Responsive Design. The sole purpose of the "row" is to contain 1 or more "columns".

DON'T PUT CONTENT DIRECTLY INSIDE THE ROW!

Again, the Row's only purpose is to contain Coumns.

        ⛔
        <div class="row">
           This is very bad, wrong way, no bueno!!
        </div>
        <div class="row">
           <p>This is also very bad, the wrong way!!</p>
        </div>
        <div class="row">
           <h2>No headings either! This is the wrong way!!</h2>
        </div>
                    

Columns, and only columns, are placed inside the Row.

        ✅
        <div class="row">
           <div class="col">Happy :-) This is the right way.</div>
        </div>
                    

It's also important to mention that the .row is display:flex. As Flexbox children, the Columns in each row are the same height. Because of Flexbox, horizontal and vertical alignment (align right, center, bottom, etc..) is easily accomplished using Bootstrap 4's Flex and Auto-margin Utility classes. Now it's time to look deeper at Rows & Columns, and exactly how they work together. There are different "types" of Columns, and different ways to use them in your layout. They are magic.


Happiness is... Columns.

All the things Bootstrap 4 Columns can do...

  • Create horizontal divisions across the viewport.
  • Can have different defined widths.
  • Can change in width at different screen widths.
  • Layout horizontally left-to-right, then vertically up-and-down.
  • Can change position (re-order) relative to siblings in the same row.
  • Are the same height as their siblings in the same row.
  • Can "grow" or "shrink" in width.
  • Can automatically "wrap" or "stack" vertically as needed, or at different widths.
  • Can contain more Rows & Columns__ this is called "nesting".

All you need to know about Bootstrap Columns...

Columns create horizontal divisions across the viewport. The space between the columns is called the "gutter".

Columns 1

The classic Bootstrap grid has 12 column units:

Columns 2
Note for Dummies: Columns aren't actually light pink. That is only used for you to see the left/right boundaries of the Columns. In most cases you're not going to use all 12 individual columns as illustrated above. Instead you'll be using some combination of the 12 to contain page content…

So, the columns can be evenly divided up into factors of 12. For example, 6 columns (12/6 = 2):

Columns 3

And, you can do the math…

Columns 4

The columns can be split-up using any part of the 12 units. And, it's okay to use less than 12. It's also okay to use more than 12 which I'll show you later.

Columns 5

With all of this flexibility, the layout possibilities are seemingly endless…

Columns 6

But, the Grid is not always about 12. Thanks to Flexbox, Bootstrap 4 has a new "Auto-layout" Columns. These unit-less columns give you even more flexibility when it comes to designing layouts.

Now you know how to use Columns to create a horizontal layout. But wait... there’s more! Let’s talk about some fancier things Columns can do.

As you saw before, Columns can be different widths:

Columns 7

Did you know that, Column width can change depending on screen width?

Columns 8

This is called Responsive Design, and I will tell you exactly how it works a very soon. But, first things first, I need to finish telling you about Columns. Remember before when I said "It's okay to use more than 12 Columns in a Row"?

Columns in the same Row layout horizontally across, and then stack vertically down. This vertical "stacking" or "wrapping" occurs when the Column units in a single Row exceed 12. This is known as "Column Wrapping"… Columns in the same Row wrap to the next line every 12 units:

Columns 9

Column width and “wrapping” can be controlled using different Responsive Grid Tiers (a.k.a “Grid Breakpoints”):

Columns responsive grid

Columns can change position (re-order) relative to siblings in the same Row:

Columns 11

Columns can contain baby Rows & Columns. This is called “Nesting”:

Columns nesting

Columns can “grow” or “shrink” in width. These are Auto-layout Columns:

Columns grow and shrink

Now that you understand the basics of using Bootstrap’s Grid System, next I will show you what the sm, -md, -lg, and -xl mean. I will explain more about how to use the Grid for Responsive Design.