Skip to content
Bootstrap 5Layout

Bootstrap 5 CSS Grid

Bootstrap 5's CSS Grid system is an opt-in alternative to the standard flexbox-based grid, enabling two-dimensional layouts using native CSS Grid under the hood. It is activated by setting display: grid on a container with the .grid class and placing children using g-col-* utilities. Use it when you need precise row and column spanning, overlapping elements, or layouts that flexbox handles awkwardly.

Bootstrap class

.grid, .g-col-*

Common use cases

  • Building a magazine-style editorial layout where the lead article spans two columns and the sidebar spans three rows alongside it
  • Creating a pricing page where the featured plan card visually breaks the row by spanning an extra column and using a different row height
  • Designing a dashboard with metric cards of varying widths (revenue card spans 8 columns, two KPI cards each span 2) without nesting extra wrapper divs
  • Constructing a photo gallery with a hero image that spans both columns and rows while smaller thumbnails fill the remaining cells automatically

Variants and classes

VariantDescription and classes
Basic gridTwelve-column CSS grid; opt in with $enable-cssgrid when compiling Sass.grid + g-col-4
Responsive spansDifferent spans per breakpoint.g-col-12 g-col-md-6
Start positionPlace an item at a given column.g-start-2
Custom columns and gapChange the column count or gap with CSS variables.grid + style="--bs-columns: 3; --bs-gap: 1rem;"

Code example

HTML
<div class="grid" style="--bs-columns: 12; --bs-gap: 1.5rem;">
  <!-- Full-width page header -->
  <div class="g-col-12">
    <h1 class="mb-0">Product Catalogue</h1>
  </div>

  <!-- Sidebar: 3 columns wide -->
  <aside class="g-col-12 g-col-md-3 p-3 bg-light rounded">
    <h5>Filter by Category</h5>
    <ul class="list-unstyled mb-0">
      <li><a href="#">Running Shoes</a></li>
      <li><a href="#">Trail Boots</a></li>
      <li><a href="#">Sandals</a></li>
    </ul>
  </aside>

  <!-- Main content: spans remaining 9 columns -->
  <section class="g-col-12 g-col-md-9">
    <div class="grid" style="--bs-columns: 3; --bs-gap: 1rem;">
      <div class="g-col-1 card p-3">Trail Runner X2</div>
      <div class="g-col-1 card p-3">Summit Boot Pro</div>
      <div class="g-col-1 card p-3">Coastal Sandal</div>
    </div>
  </section>

  <!-- Full-width footer strip -->
  <footer class="g-col-12 text-muted small pt-2 border-top">
    Showing 3 of 24 products
  </footer>
</div>

Live examples

Basic CSS Grid

Bootstrap's CSS Grid classes. The style block adds the rules the opt-in $enable-cssgrid setting compiles to, because the CDN build leaves them out.

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

  • Canvas Builder generated css grid with custom colours
  • CSS Grid with interactive states
  • Responsive css grid for all screen sizes

Best practices

Override column count with a CSS variable, not a new class

Bootstrap's CSS Grid uses the --bs-columns custom property, so you can change the grid from 12 to 6 columns by adding style="--bs-columns: 6" inline or in a scoped CSS rule, no extra utility classes needed.

Use g-start-* to force a column start position

Apply g-start-4 to make an element begin at column line 4 regardless of what precedes it, essential for pinning a sidebar to the right or creating deliberate whitespace gaps in an editorial layout.

Nest .grid containers for independent sub-grids

Place a second .grid div inside a g-col-* cell and set its own --bs-columns value; the child grid is completely independent, so a 9-column main area can host a 3-column product card row without inheriting the parent's column count.

Combine with responsive g-col-{breakpoint}-* classes

Stack everything to full-width on mobile with g-col-12, then apply g-col-md-4 for tablet and g-col-lg-3 for desktop, the same responsive breakpoint tokens from the flex grid work identically here.

FAQ

What is the difference between Bootstrap 5's .grid CSS Grid system and its classic .row/.col-* flexbox grid?
The classic .row/.col-* system uses flexbox and wraps columns automatically. Bootstrap 5's .grid system uses native display: grid and grid-template-columns, which means elements can span rows as well as columns, you can create overlapping cells, and the gap is controlled uniformly by --bs-gap rather than separate gutter padding on each column. The CSS Grid approach requires fewer wrapper divs for complex two-dimensional layouts but is opt-in so it does not affect existing projects.
How do I make a grid item span multiple rows in Bootstrap 5's CSS Grid?
Bootstrap 5 does not ship row-span utilities out of the box, so you add them yourself with a small CSS rule: .g-row-span-2 { grid-row: span 2; }. Apply that class to the element you want to stretch across two rows. Because Bootstrap's .grid uses native CSS Grid, standard grid-row, grid-column, and grid-area properties all work without workarounds.
How does Canvas Builder handle CSS Grid layouts when generating a page?
Canvas Builder detects layout patterns in your prompt (phrases like 'sidebar with content', 'asymmetric columns', or 'spanning hero card') and emits the appropriate .grid container with computed --bs-columns and g-col-* classes rather than defaulting to nested .row divs. Brand colours from your palette are applied via CSS custom properties on the grid cells, and all output is fully responsive with stacked mobile breakpoints already written in, so the generated code is production-ready without manual media-query editing.