The Grid System (Rows & Columns)
Master Bootstrap's 12-column grid system, using .row and .col-* classes to build flexible, multi-column layouts.
Introduction
The grid system is the single most important feature in Bootstrap. It provides a structured way to divide a page into rows and columns, letting you build layouts ranging from simple two-column pages to complex dashboards, all using nothing but HTML classes.
- The concept behind Bootstrap's 12-column grid.
- How .row and .col classes work together.
- The difference between auto-layout columns and explicit width columns.
- How to build a basic 3-column layout.
The 12-Column Concept
Bootstrap divides each row into 12 equal invisible units, called columns. Instead of specifying a width in pixels or percentages, you tell an element how many of those 12 units it should occupy. For example, a column set to span 6 units takes up exactly half the row (6 out of 12), and a column set to span 4 units takes up exactly one-third of the row (4 out of 12). Twelve was chosen because it divides evenly into halves, thirds, quarters, and sixths, covering most common layout needs.
Rows and Columns
Every grid layout needs two elements: a `.row`, which acts as a horizontal wrapper, and one or more `.col-*` elements inside it, which are the actual content columns. Rows must be placed inside a container, as covered in the previous lesson, and columns must always be placed inside a row.
<div class="container"> <div class="row"> <div class="col-6">Half Width</div> <div class="col-6">Half Width</div> </div></div>Click Run to see what this code prints.
Auto-Layout Columns
If you use the plain `.col` class without a number, Bootstrap automatically splits the available space equally among all `.col` elements in that row. This is useful when you do not care about exact proportions and just want equal-width columns.
<div class="container"> <div class="row"> <div class="col">Column A</div> <div class="col">Column B</div> <div class="col">Column C</div> <div class="col">Column D</div> </div></div>Click Run to see what this code prints.
Setting Explicit Column Widths
When you need specific proportions, use `.col-1` through `.col-12`, where the number represents how many of the 12 grid units that column should occupy. The numbers in a row do not have to add up to exactly 12; if they do add up to more than 12, the extra columns wrap onto a new line.
<div class="container"> <div class="row"> <div class="col-8">Main Content (col-8)</div> <div class="col-4">Sidebar (col-4)</div> </div></div>Click Run to see what this code prints.
A Basic 3-Column Layout
A classic use case is splitting a row into three equal columns, for example to show three feature cards side by side. Since 12 divides evenly by 3, each column gets `.col-4`.
<div class="container"> <div class="row"> <div class="col-4"> <h4>Feature One</h4> <p>Description of the first feature.</p> </div> <div class="col-4"> <h4>Feature Two</h4> <p>Description of the second feature.</p> </div> <div class="col-4"> <h4>Feature Three</h4> <p>Description of the third feature.</p> </div> </div></div>Click Run to see what this code prints.
Column Gaps and Gutters
The small space you see between columns is called a "gutter." Bootstrap adds gutters automatically using padding on columns combined with negative margins on the row, which is exactly why rows must sit inside a container, as explained in the previous lesson. You can adjust gutter size using classes like `.g-0` (no gutter) through `.g-5` (large gutter) on the row.
<div class="row g-4"> <div class="col-4">A</div> <div class="col-4">B</div> <div class="col-4">C</div></div>Click Run to see what this code prints.
Common Mistakes
- Placing `.col-*` elements directly inside a `.container` without a wrapping `.row`.
- Using column numbers that add up to more than 12 without expecting the extra columns to wrap to a new line.
- Mixing `.col` and `.col-*` in the same row without understanding how the leftover space is distributed.
- Forgetting that column widths (like col-4) apply at all screen sizes unless a responsive prefix like col-md-4 is used.
Best Practices
- Always structure your grid as container > row > col.
- Use plain .col when you want equal-width columns without doing the math yourself.
- Use explicit .col-* numbers when you need specific, deliberate proportions.
- Use gutter classes like .g-3 to fine-tune spacing instead of adding custom margin CSS.
Frequently Asked Questions
The columns that do not fit wrap onto a new line within the same row automatically, Bootstrap never squeezes them to overflow the row.
Yes, you can stack as many .row elements as you need inside a single container.
Yes, since Bootstrap 4, the grid system uses CSS Flexbox, which is why columns can easily be reordered, aligned, and resized with additional utility classes.
Key Takeaways
- Bootstrap's grid divides each row into 12 equal-width units.
- A .row wraps one or more .col elements, and must sit inside a container.
- Plain .col creates equal-width columns automatically; .col-1 through .col-12 set explicit widths.
- Gutter classes like .g-0 through .g-5 control the spacing between columns.
Summary
The 12-column grid is the backbone of nearly every Bootstrap layout you will build. With the fundamentals in place, the next lesson shows how to make your grid respond differently at different screen sizes using Bootstrap's breakpoint system.