Containers and the Grid System

Every Bootstrap layout starts with a container. Containers center your content, add horizontal padding, and set the maximum width of the page at each screen size. Inside containers, the grid system divides space into rows and columns so elements line up predictably on any device. This lesson explains the three container types and the core mechanics of the 12-column grid.

The Three Container Types

Bootstrap offers three flavors of container:

.container sets a fixed max-width that steps up at each breakpoint (540px, 720px, 960px, 1140px, 1320px).
.container-fluid always spans 100% of the viewport width.
.container-{breakpoint} (for example .container-md) is full width until the named breakpoint, then behaves like a fixed container.

html

<div class="container">Fixed-width, centered content</div>
<div class="container-fluid">Edge-to-edge content</div>
<div class="container-lg">Fluid below lg, fixed from lg up</div>

Use .container for articles and marketing pages, and .container-fluid for dashboards that should use every pixel.

How the 12-Column Grid Works

The grid is built on CSS flexbox and follows a simple hierarchy: container, then row, then columns. Each row is divided into 12 invisible tracks, and each column class says how many tracks it should span.

html

<div class="container">
  <div class="row">
    <div class="col-8 bg-light border">Main content (8 of 12)</div>
    <div class="col-4 bg-light border">Sidebar (4 of 12)</div>
  </div>
</div>

Because 8 + 4 = 12, the two columns fill the row exactly. If column spans add up to more than 12, the extras wrap onto a new line, which is often exactly what you want on smaller screens.

Auto-Layout Columns

You do not always have to count to 12. Plain .col classes share the available width equally:

html

<div class="row">
  <div class="col">One third</div>
  <div class="col">One third</div>
  <div class="col">One third</div>
</div>

You can also mix sized and auto columns: give one column .col-6 and leave two siblings as .col, and the pair will split the remaining six tracks evenly. .col-auto sizes a column to its natural content width.

Gutters: The Space Between Columns

Rows use negative margins and columns use horizontal padding to create gutters. You control them with gutter utilities: g-0 removes gutters entirely, while g-1 through g-5 scale them up. Use gx-* for horizontal and gy-* for vertical gutters, which matter when columns wrap onto multiple lines.

html

<div class="row g-3">
  <div class="col-6"><div class="p-3 border bg-light">Box</div></div>
  <div class="col-6"><div class="p-3 border bg-light">Box</div></div>
  <div class="col-6"><div class="p-3 border bg-light">Box</div></div>
  <div class="col-6"><div class="p-3 border bg-light">Box</div></div>
</div>

Nesting Rows

Grids can nest. Place a new .row inside any column and you get a fresh set of 12 tracks scoped to that column. Nesting is the standard way to build complex layouts such as a sidebar containing its own two-column widget area.

Common Mistakes to Avoid

Never place a .col-* element outside a .row; the negative margins will misalign it.
Do not put content directly inside a .row; always wrap it in a column.
Avoid fixed pixel widths on columns; let the grid classes control sizing.

Key Takeaways

Containers wrap all layouts: fixed, fluid, or responsive per breakpoint.
The grid hierarchy is container > row > column, with 12 tracks per row.
.col auto-divides space; .col-{n} spans n of 12 tracks; extras wrap.
Gutter utilities (g-*, gx-*, gy-*) control spacing between columns.

Next lesson: Grid Columns, Breakpoints and Responsive Layouts, where the grid becomes truly responsive.