The Grid System

Introduction

The grid is the heart of Bootstrap. It is a 12-column layout system built on flexbox that lets you arrange content into rows and columns that automatically reflow on different screen sizes. Instead of writing media queries by hand, you describe how many of the 12 columns each element should span at each breakpoint, and Bootstrap does the rest.

Theory

The three building blocks

• Container — .container or .container-fluid wraps the grid and provides gutters/padding.
• Row — .row is a horizontal group of columns. It uses negative margins to offset column padding.
• Column — .col (or .col-{n}) holds your content. Columns must be direct children of a row.

Breakpoints

Each breakpoint has an infix you insert into the class name. A class applies from that width and up (mobile-first):

• .col- — extra small, <576px (no infix)
• .col-sm- — small, ≥576px
• .col-md- — medium, ≥768px
• .col-lg- — large, ≥992px
• .col-xl- — extra large, ≥1200px
• .col-xxl- — extra extra large, ≥1400px

Example: <div class="col-12 col-md-6 col-lg-4"> is full width on phones, half on tablets, and one-third on desktops.

Auto-layout columns

If you use plain .col with no number, the columns split the row equally. .col-auto sizes a column to its content width.

Offsets and nesting

.offset-md-2 pushes a column 2 slices to the right at md and up. You can also nest a new .row inside any column to subdivide it further.

Real World Example

A responsive three-column feature section — stacked on phones, side-by-side from md up:

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-md-4">Feature 1</div>
    <div class="col-12 col-md-4">Feature 2</div>
    <div class="col-12 col-md-4">Feature 3</div>
  </div>
</div>

Live demo (resize your window to watch the columns reflow):

Common Mistakes

• Putting columns outside a row. Columns must be direct children of .row, or their padding/gutters break.
• Exceeding 12 in one row unintentionally. Columns summing to more than 12 wrap to a new line — sometimes useful, often a surprise.
• Forgetting the container. A bare .row on the page body can cause horizontal scroll from its negative margins.
• Using fixed pixel widths inside columns. Let the grid control width; use utilities like w-100 for inner elements.

Best Practices

• Design mobile-first: start with .col-12 and add larger-breakpoint classes only where the layout should change.
• Use gutter utilities (g-3, gx-2, gy-4) instead of manual margins between columns.
• Reach for auto-layout .col when columns should simply share space equally.
• Nest rows for complex layouts rather than fighting a single row with offsets.

Practice Exercise

1. Create a container with one row containing two .col-md-6 columns. Give each a background color and some padding.
2. Below it, add a row with four columns that are full width on mobile and quarter width on large screens (col-12 col-lg-3).
3. Add an offset so a single column sits centered in the row.
4. Resize the browser and confirm the columns stack and reflow at each breakpoint.

Assignment

Build a responsive photo gallery layout (placeholder boxes are fine):

1. One row of items that shows 1 column on extra-small, 2 on small, 3 on medium, and 4 on large screens.
2. Use a gutter utility for consistent spacing.
3. Nest a row inside one of the columns to show a caption above a thumbnail.

Interview Questions

• How many columns does the Bootstrap grid have? — 12, by default.
• What does .col-md-6 mean? — Span 6 of 12 columns (half width) at the md breakpoint and above; below md it falls back to the next smaller defined class (or full width).
• What technology powers the Bootstrap 5 grid? — Flexbox.
• What is the difference between .col and .col-6? — .col auto-splits remaining space equally; .col-6 always spans 6 columns.
• How do you horizontally center a single column? — Use an offset (e.g. col-6 offset-3) or justify-content-center on the row.

Additional Resources

• getbootstrap.com/docs/5.3/layout/grid — the official grid documentation
• getbootstrap.com/docs/5.3/layout/breakpoints — breakpoint reference
• getbootstrap.com/docs/5.3/layout/columns — column sizing, offsets, and ordering