What is the Bootstrap “Grid”?
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 1 or more Containers.
Here’s the most 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>
Which gives us one big “column” horizontally across the viewport
<div class="container"> <div class="row"> <div class="col">Left column</div> <div class="col">Right column</div> </div> </div>
This gives 2 columns etc
The Rules of the Grid:
Columns must be the immediate child of a Row.
Rows are only used to contain Columns, nothing else.
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.
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.
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:
2 — Full-width container for a layout the spans the entire width:
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.
Happiness is, Columns…
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 other siblings in the same row.
Can “grow” or “shrink” in width.
Can automatically “wrap” or “stack” vertically as needed, or at different screen widths.
Can contain more Rows & Columns__ nesting.
All you need to know about Bootstrap Columns.
Just don’t forget that Columns must be the direct child of a Row.
Columns create horizontal divisions across the viewport. The space between the columns is called the “gutter”.
he classic Bootstrap grid has 12 column units:
So, the columns can be evenly divided up into factors of 12. For example, 6 columns (12/6 = 2):
But, the Grid is not always about 12. Thanks to Flexbox, Bootstrap 4 has new “Auto-layout” Columns. These unit-less columns give you even more flexibility when it comes to designing layouts.