How the Bootstrap 4 Grid Works

I will address Grid questions like these in a little while. But, first I want to take a step back to explain something very important about using the Grid.

Trust me. 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.

___________________________________________________________________

How to Use the Bootstrap Grid __The Right Way.

Container

In the basic example before you may have noticed that I used the .containerto 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>

Don’t Ignore the Container.

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. The Container is used to counteract the negative margins of the Row which I will explain a little further down.

FYI: Viewport — The visible area inside the browser window.

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-fluidon smaller devices.

Reminder: 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.