Bootstrap 4: Learn the “Grid”
The Essence of Layouts with Bootstrap’s Rows & Columns
Part 2 of the Tutorial on Bootstrap 4
You need to know and understand Bootstrap’s grid system in order to layout content in Bootstrap 4. I have written about the Bootstrap 3 Grid before, and while many of the concepts are the same, there is some new stuff you should know about in Bootstrap 4.
What is the “Grid” ?
The combination of the Container, Rows & Columns that make responsive layouts possible. Containers work in close partnership with Rows & Columns to create the “Grid”.
Container
The root (top-level) element of the Bootstrap grid is the Container. At first the container may seem trivial or unnecessary, but it’s very important to control width of the layout. Bootstrap 4 provides 2 types of Containers. Choose one to contain your layout…
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 fixed-width .container scales down in width responsively so that it eventually becomes 100% width (the same as .container-fluid) on smaller devices.
Rows & Columns
Directly inside the Container, are one or more Rows…
<div class="container">
<div class="row"></div>
</div>Rows have only one purpose… to contain Columns.
“Rows are wrappers for columns. Each column has horizontal
padding(called a gutter) for controlling the space between them. Thispaddingis then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the side.”
Directly inside the Row, is one or more Columns. The immediate parent of a Column should ALWAYS be a Row. Columns are holders of content. There are 12 column units that span horizontally (in a row) across the width of the container…
<div class="container">
<div class="row">
<div class="col-12">I am the grid!</div>
</div>
</div>And, with this combination of container, row(s) and columns(s), the grid is complete! Now lets takes a closer look at columns.
Column Widths
col-1= 8.33333%col-2= 16%col-3= 25%col-4= 33.33333%col-5= 41.666667%col-6= 50%col-7= 58.333333%col-8= 66.666667%col-9= 75%col-10= 83.333333%col-11= 91.666667%col-12= 100%
A single column unit, (col-1) consumes just 8.33333% width across. This is pretty small so in most cases you’re creating layouts that span more than just 1 column unit.
You might have a one column (col-12)that spans the whole width (100%) of the container…
<div class="container">
<div class="row">
<div class="col-12">I am 12 units wide</div>
</div>
</div>Or, you might use multiple columns to span across a portion of the possible 12. For example, here’s a 2-column layout with a narrower column on the left, and wider column on the right…
<div class="container">
<div class="row">
<div class="col-3">I am 3 cols wide</div>
<div class="col-9">I am 9 cols wide</div>
</div>
</div>You can use any combination of the 12 Columns.
You can use less than 12 column units in a single.row …
<div class="container">
<div class="row">
<div class="col-10">I am 10 cols wide</div>
</div>
</div>Or, you can use more than 12 column units in a single.row . Once 12 is exceeded the columns “wrap” to the next horizontal line…
<div class="container">
<div class="row">
<div class="col-4">..</div>
<div class="col-4">..</div>
<div class="col-4">..</div>
<!-- a line wrap will occur here -->
<div class="col-4">..</div>
<div class="col-4">..</div>
<div class="col-4">..</div>
</div>
</div>Extra info — It’s a common misconception that a single
.rowcan never exceed 12 units. You learn more about column wrapping in the docs, or read this article I wrote the column wrapping topic.
Try this Bootstrap grid demo.
Columns can also be containers for more Rows & Columns.
This is called “Nesting”…
<div class="container">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-3">3 columns wide</div>
<div class="col-9">9 columns wide</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-9">9 columns wide</div>
<div class="col-3">3 columns wide</div>
</div>
</div>
</div>
</div>Nesting is helpful when creating more complex layouts.
Bootstrap Grid FAQ’s
Q: Can I put content and HTML elements directly in the Container? Do I have to use the Rows & Columns?
A: Yes, the .container is used to control the width of the page layout, and components such as the Navbar. You don’t have to use .row > .col-* inside the .container, but when you do the .row should be inside a .container.
Q: Can I put content and HTML elements directly in a Row? Do I have to use Columns inside the Row?
A: No, the .row is only used to contain .col-* , and content should never be placed directly in the .row. Only columns should be the immediate children of the row. This is because the .row has a negative margins to counteract the padding on the columns.
Q: Why are there “12” columns? Why not 5, 10, or 16 or something else?
A: Because 12 evenly divides into 6 (halves), 4 (quarters) and 3 (thirds). This makes adapting to a variety of layouts much easier.
Q: Can I use more than 12 column units in a .row? Can I use less than 12 column units?
A: Yes. 12 is the most you’ll see span across the width. Once you have more than 12 the columns will “wrap” to the new line (horizontally) across the screen.
The Bootstrap grid is super flexible, and the possibilities are endless. Now that you know about those amazing rows and columns, you’ll be able to create the layout you desire.
Next, you’ll want to explore the various components that Bootstrap 4 provides to make your site look great, responsive and functional.
Up next…
Part 3 of the Tutorial on Bootstrap 4 — Use the Components
