Bootstrap Grid System

The grid system is the heart of Bootstrap layout. This lesson explains how rows and columns work together, and how to size and align columns responsively.

Bootstrap Grid System Overview

Bootstrap's grid is built with flexbox and divides horizontal space into 12 equal columns. A .row creates a flex container, and .col-* elements inside it become flex items. Columns can be sized explicitly (col-4), auto-sized to share space equally (col), or sized to fit their content (col-auto).

Because the grid is responsive by default, you combine breakpoint-specific classes like col-md-6 to change column width at different screen sizes, letting a single markup structure adapt from stacked mobile layouts to multi-column desktop layouts.

Concept	Description	Common Usage
.row	Flexbox row wrapper with negative margins	Groups a set of columns
.col	Equal-width flexible column	Even spacing without specifying a number
.col-{n}	Column spanning n of 12 grid units	Precise, fixed-width layout columns
.col-auto	Column sized to fit its content	Buttons or labels next to flexible columns
Row-cols utilities	Set equal column count per row automatically	Grids of cards without individual col classes

Bootstrap Grid System Example

<div class="container">
  <div class="row">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>

  <div class="row">
    <div class="col">Equal width</div>
    <div class="col">Equal width</div>
    <div class="col-auto">Fits content</div>
  </div>

  <div class="row row-cols-1 row-cols-md-3 g-3">
    <div class="col">Card 1</div>
    <div class="col">Card 2</div>
    <div class="col">Card 3</div>
  </div>
</div>

The first row splits evenly into three explicit col-4 columns totaling 12. The second row mixes flexible col columns with a col-auto column that shrinks to fit its content. The third row uses row-cols utilities to switch from one column on mobile to three on medium screens and up.

Top 10 Bootstrap Grid System Examples

These are the grid patterns you'll reuse constantly when laying out Bootstrap pages.

#	Example	Syntax
1	Three equal columns	`<div class="row"><div class="col-4">A</div><div class="col-4">B</div><div class="col-4">C</div></div>`
2	Flexible equal-width columns	`<div class="row"><div class="col">A</div><div class="col">B</div></div>`
3	Content-sized column	`<div class="col-auto">Fits content</div>`
4	Responsive column width	`<div class="col-12 col-md-6 col-lg-4">...</div>`
5	Row-cols responsive grid	`<div class="row row-cols-1 row-cols-md-3">...</div>`
6	Nested grid	`<div class="col-6"><div class="row"><div class="col-6">Nested</div></div></div>`
7	Column ordering	`<div class="col order-md-2">Second on md+</div>`
8	Vertical alignment on row	`<div class="row align-items-center">...</div>`
9	Horizontal alignment on row	`<div class="row justify-content-between">...</div>`
10	No-gutters row	`<div class="row g-0">...</div>`

Popular Real-World Bootstrap Grid System Examples

These are grid layouts that show up constantly in real dashboards, marketing pages, and product listings.

Scenario	Pattern
Blog layout with sidebar	`<div class="row"><div class="col-lg-8">Post</div><div class="col-lg-4">Sidebar</div></div>`
Product grid	`<div class="row row-cols-2 row-cols-md-4 g-3">...</div>`
Dashboard stat cards	`<div class="row g-3"><div class="col-md-3">Stat</div>...</div>`
Form label and input	`<div class="row"><div class="col-auto">Label</div><div class="col">Input</div></div>`
Footer link columns	`<div class="row"><div class="col-6 col-md-3">Links</div>...</div>`
Pricing table columns	`<div class="row"><div class="col-md-4">Plan A</div><div class="col-md-4">Plan B</div><div class="col-md-4">Plan C</div></div>`
Centered single column form	`<div class="row justify-content-center"><div class="col-md-6">Form</div></div>`
Reordering columns on mobile	`<div class="col-12 order-2 order-md-1">Main</div>`
Auto-fit toolbar buttons	`<div class="row g-2"><div class="col-auto">Btn</div><div class="col-auto">Btn</div></div>`

Best Practices

Always total 12 (or less) across explicit col-{n} classes within a single row.
Use col or row-cols utilities when columns should share space evenly without manual math.
Add responsive classes like col-md-6 to change layout at specific breakpoints.
Use gutter utilities (g-*) to control spacing instead of custom margins between columns.
Reach for order-* utilities to visually reorder columns without changing the DOM.
Use align-items and justify-content on the row to control cross-axis and main-axis alignment.
Keep nested grids shallow; deeply nested rows and columns become hard to maintain.
Test every custom grid layout at each breakpoint, not just desktop and mobile extremes.

Common Mistakes

Adding col-* elements without a wrapping .row, which breaks the flex context.
Letting explicit column numbers exceed 12 in a single row without intending to wrap.
Forgetting that columns without a number (col) automatically become equal width.
Using margin utilities to fake column widths instead of proper col-* classes.
Not accounting for gutter padding when placing borders or backgrounds on columns.
Overusing col-auto everywhere, leading to unpredictable column widths on smaller screens.
Forgetting to test row-cols utilities across all target breakpoints.

Key Takeaways

Bootstrap's grid is a 12-column flexbox system built from .row and .col-* classes.
Columns can be numbered, equal-width, auto-sized, or defined per row with row-cols.
Responsive classes let a single layout adapt across breakpoints.
Alignment utilities on the row control both horizontal and vertical positioning.
Gutter and ordering utilities remove the need for most custom layout CSS.

Pro Tip

When a design shows a repeating card grid, reach for row-cols-* utilities before hand-writing col-md-4 col-lg-3 on every single card; it's shorter and easier to adjust later.