Everything You Need to Know About Bootstrap 5 Grid System

Bootstrap’s grid is responsible for more responsive layouts than virtually any other CSS system in existence, yet most developers only scratch the surface of what it can actually do. If you are structuring a simple two-column blog or a complex multi-breakpoint dashboard, understanding the Bootstrap 5 grid system in full gives you a real speed and consistency advantage.

What the Bootstrap 5 Grid System Actually Is

Bootstrap 5’s grid is a 12-column, Flexbox-based layout system that uses a series of containers, rows, and columns to structure page content. Unlike CSS Grid (the native browser specification), Bootstrap’s grid is a higher-level abstraction: it wraps Flexbox behaviour inside a predictable class-naming convention so you can write layout logic directly in HTML without touching a stylesheet.

The system shipped in Bootstrap 5 with one important upgrade over Bootstrap 4: the xxl breakpoint was added at 1400px and above, making it the first version to formally support very wide screens. Canvas Builder and the Canvas HTML Template both use Bootstrap 5 bundled internally, so every grid concept in this guide applies directly when you are building layouts on top of Canvas.

The Six Breakpoints and When to Use Each

Every Bootstrap 5 breakpoint maps to a minimum viewport width. The grid is mobile-first, meaning styles cascade upward: a class you apply at sm also applies at md, lg, and wider, unless overridden.

Breakpoint	Infix	Min Width	Typical Target
Extra small	(none)	0px	Portrait phones
Small	sm	576px	Large phones / small tablets
Medium	md	768px	Tablets
Large	lg	992px	Laptops
Extra large	xl	1200px	Desktops
Extra extra large	xxl	1400px	Wide monitors

A practical rule: define your mobile layout first (the default, no infix), then add breakpoint classes where the design actually needs to change. Avoid specifying every breakpoint on every column unless the design genuinely requires it.

Containers, Rows, and Columns: The Core Structure

Every grid layout requires three nested elements in the correct order: a container, a row, and one or more columns. Skipping a level produces broken spacing and alignment.

Bootstrap 5 ships three container variants:

• .container, fixed maximum width at each breakpoint, centred with auto margins.
• .container-fluid, full-width at all times, no maximum.
• .container-{breakpoint}, fluid below the specified breakpoint, fixed above it.

Here is the fundamental three-column layout that collapses to a single column on mobile:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">
      <p>Column one — full width on mobile, one-third on tablets and up.</p>
    </div>
    <div class="col-12 col-md-4">
      <p>Column two.</p>
    </div>
    <div class="col-12 col-md-4">
      <p>Column three.</p>
    </div>
  </div>
</div>

col-12 handles mobile and col-md-4 (three columns of 4 = 12) handles the tablet-and-up layout. This is the mobile-first pattern in its most direct form.

Auto-Layout Columns and Equal-Width Grids

When you do not need precise column widths, Bootstrap 5’s auto-layout classes are faster to write and easier to maintain. Using .col (no number) distributes available space equally across all siblings in the row.

<div class="container">
  <div class="row">
    <div class="col">Auto — equal share</div>
    <div class="col">Auto — equal share</div>
    <div class="col">Auto — equal share</div>
  </div>
  <div class="row mt-3">
    <div class="col">Auto</div>
    <div class="col-6">Fixed six — always half</div>
    <div class="col">Auto</div>
  </div>
</div>

In the second row, the fixed col-6 takes exactly half the container width and the two col siblings split the remaining space equally. This pattern works well for hero sections and pricing tables where one column needs visual emphasis, a technique covered in more detail in How to Design Hero Sections That Grab Attention Instantly.

Gutters: Controlling Column Spacing Precisely

Bootstrap 5 replaced the old padding-based gutter system with dedicated gutter classes (g-, gx-, gy-*), giving you independent control over horizontal and vertical spacing without negative margin workarounds.

• g-{value}, applies to both horizontal and vertical gutters.
• gx-{value}, horizontal gutters only (between columns).
• gy-{value}, vertical gutters only (between wrapped rows).

Values run from 0 (no gap) to 5, matching Bootstrap’s standard spacing scale. You can also use breakpoint-specific gutter classes such as gx-md-4 to widen gutters only on larger screens.

<div class="container">
  <div class="row gx-3 gy-4">
    <div class="col-6 col-lg-3">Card A</div>
    <div class="col-6 col-lg-3">Card B</div>
    <div class="col-6 col-lg-3">Card C</div>
    <div class="col-6 col-lg-3">Card D</div>
  </div>
</div>

This pattern produces a 2-up card grid on mobile and a 4-up grid on large screens, with 12px horizontal gutters and 24px vertical gutters. It is the most common card layout pattern across niche-specific builds, including those described in How to Build a Pet Business Website with Bootstrap 5.

Offsets, Order, and Alignment Utilities

Three utility families handle layout problems that column widths alone cannot solve.

Offsets push a column to the right by a set number of columns using offset-{n} or offset-{breakpoint}-{n}. A centred single column reads as:

<div class="container">
  <div class="row">
    <div class="col-8 offset-2">
      Centred content — 8 columns wide, 2-column offset on each side.
    </div>
  </div>
</div>

Order classes change the visual sequence of columns without altering the HTML source order, which matters for both design flexibility and accessibility. Use order-first, order-last, or order-{1-5}. On mobile it is common to display a call-to-action before a product image even when the image appears first in the markup.

Alignment utilities on the row control vertical positioning: align-items-start, align-items-center, and align-items-end. Per-column overrides use align-self-. Horizontal distribution uses justify-content- on the row. These replace every float hack from Bootstrap 3 and earlier. If you are also thinking about colour contrast alongside layout, Contrast and Accessibility in HTML Templates covers how visual hierarchy interacts with WCAG compliance.

Nesting Grids Inside Columns

A column can contain its own row, creating a nested grid. The inner row still divides into 12 columns relative to its parent column’s width, not the full page width. This is essential for complex card layouts, sidebars with their own sub-sections, and multi-panel dashboards.

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <!-- Outer main content column -->
      <div class="row">
        <div class="col-6">Inner left (50% of the 8-column parent)</div>
        <div class="col-6">Inner right (50% of the 8-column parent)</div>
      </div>
    </div>
    <div class="col-md-4">
      Sidebar
    </div>
  </div>
</div>

One important note: nested rows do not require an additional .container wrapper. Adding one creates unwanted horizontal padding and breaks the inner grid’s alignment with the outer gutter system.

Using the Bootstrap 5 Grid Inside Canvas HTML Template

Because Canvas bundles Bootstrap 5 internally, every grid class works out of the box with no additional stylesheet or CDN link. Do not load Bootstrap from a CDN when working with Canvas. Duplicate Bootstrap loading produces conflicting styles and broken component behaviour.

Canvas section markup typically wraps content in a .container inside a <section> element. A typical Canvas-compatible feature section using the grid looks like this:

<section class="py-5">
  <div class="container">
    <div class="row align-items-center gy-4">
      <div class="col-12 col-lg-6">
        <h2>Your Feature Headline</h2>
        <p>Supporting copy goes here, describing the value proposition.</p>
        <a href="#" class="button button-rounded button-large">Get Started</a>
      </div>
      <div class="col-12 col-lg-6">
        <img src="images/feature.jpg" class="img-fluid rounded" alt="Feature illustration">
      </div>
    </div>
  </div>
</section>

Canvas theme colour customisation is handled separately through CSS variables such as --cnvs-themecolor, not through Bootstrap’s --bs-primary. The grid classes, however, are pure Bootstrap and carry no Canvas-specific overrides. When you use Canvas Builder to generate layouts, the grid structure is scaffolded automatically to match Canvas’s section patterns, saving you the column-counting step on every new component.

Common Grid Mistakes and How to Avoid Them

Even experienced developers repeat a handful of grid errors consistently:

1. Skipping the row wrapper. Columns placed directly inside a container without a .row lose their gutter alignment and flex context entirely.
2. Exceeding 12 columns in a row without intending to wrap. Columns summing beyond 12 wrap to a new line, which is intentional only when you are building a wrapping card grid.
3. Adding a container inside a container. Nested content only needs a new .row, not a new .container. Double containers add unexpected horizontal padding.
4. Using pixel widths on columns. Bootstrap columns are percentage-based by design. Applying width: 300px directly on a .col breaks the responsive scaling.
5. Forgetting mobile-first order. Writing col-lg-6 without a mobile column class means the column defaults to full width (col-12) on small screens, which is usually correct but should be a deliberate choice, not an accident.

If you need to calculate exact column widths in pixels for a given container size and gutter, the Bootstrap Grid Calculator gives you precise measurements in seconds.

If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.