If you have ever opened a website on your phone and watched columns stack neatly into a single readable column, the Bootstrap 5 grid system was almost certainly doing the work behind the scenes. Understanding how that grid works is the single most valuable skill you can develop as a front-end developer or designer in 2025, because it underpins nearly every responsive layout you will ever build.
- Bootstrap 5 uses a 12-column flexbox grid with six responsive breakpoints that control how columns behave at different screen widths.
- Every grid layout requires three nested layers: a container, a row, and at least one column — skipping any layer breaks the layout.
- Column classes can be combined with offset, order, and alignment utilities to handle almost any layout requirement without writing custom CSS.
- Bootstrap 5 ships with the Canvas HTML Template, meaning you never need to load Bootstrap separately when building on Canvas.
How the Bootstrap 5 Grid Works
The Bootstrap 5 grid is built entirely on CSS Flexbox. It divides every row into 12 equal columns, and you decide how many of those columns each element should occupy. A column spanning all 12 units fills the full width. A column spanning 6 units fills half the width. Two columns spanning 4 units each fill two-thirds of the row — you get the idea.
Three structural layers are always required:
- Container — centres the layout and applies horizontal padding. Use
.containerfor a fixed max-width or.container-fluidfor full-width. - Row — creates a flex container that holds columns. The
.rowclass also applies negative margins to counteract the column gutters. - Column — the actual content wrapper. Column classes always start with
col.
<div class="container">
<div class="row">
<div class="col-6">Left column</div>
<div class="col-6">Right column</div>
</div>
</div>This produces two equal columns on every screen size. That is the simplest form of the grid. From here, you layer in breakpoints to make the layout responsive.
The Six Breakpoints Explained
Bootstrap 5 ships with six named breakpoints. Each maps to a minimum viewport width, and column classes target these breakpoints with a simple infix in the class name.
| Breakpoint | Infix | Min-width |
|---|---|---|
| Extra small | (none) | 0px |
| Small | sm | 576px |
| Medium | md | 768px |
| Large | lg | 992px |
| Extra large | xl | 1200px |
| Extra extra large | xxl | 1400px |
Bootstrap uses a mobile-first approach. A class like .col-md-6 means “span 6 columns from the medium breakpoint upwards.” Below 768px, the column falls back to full width. This mobile-first logic means you define the smallest layout first and add classes to override it at larger sizes — exactly the opposite of the older desktop-first thinking many designers carried over from Bootstrap 3.
Writing Responsive Column Classes
The real power emerges when you stack multiple breakpoint classes on a single element. Consider a three-column card layout that should stack on mobile, show two columns on tablets, and show three on desktops:
<div class="container">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-4">
<div class="card p-3">Card One</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card p-3">Card Two</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card p-3">Card Three</div>
</div>
</div>
</div>The g-4 class on the row controls the gutter spacing between columns. Bootstrap 5 introduced gap utilities via the g-, gx-, and gy-* classes, replacing the old padding-based approach and making spacing far more predictable. If you want to go deeper on spacing and display utilities that complement the grid, the Bootstrap 5 utility classes guide covers exactly that.
Offsets, Column Ordering, and Alignment
Sometimes you need a column that does not start at the left edge of its row. Offset classes push a column to the right by a set number of columns without adding an empty column element to your HTML.
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
Centred column on medium screens and above
</div>
</div>
</div>Column ordering lets you change the visual sequence of columns without altering the HTML source order — important for accessibility and SEO. The order-* classes accept values from 1 to 5, plus order-first and order-last.
Vertical alignment of columns within a row is handled by adding flexbox alignment classes to the row or individual columns:
.align-items-start,.align-items-center,.align-items-end— applied to the row, affects all columns..align-self-start,.align-self-center,.align-self-end— applied to an individual column.
If you want to generate and visualise flexbox alignment rules quickly before writing them into your layout, the CSS Flexbox Generator is a practical tool for that workflow.
Using the Grid Inside the Canvas HTML Template
The Canvas HTML Template bundles Bootstrap 5 directly — you do not reference a CDN or install a separate package. Canvas loads Bootstrap as part of its own compiled stylesheet, so all grid classes described in this guide work out of the box. You simply write your markup and the grid responds correctly.
One common confusion for Canvas newcomers is wondering whether custom Bootstrap overrides will conflict with Canvas styles. They will not, as long as you add your overrides in a separate stylesheet that loads after style.css. For example, to create a custom section that uses an asymmetric two-column layout:
<section class="py-5">
<div class="container">
<div class="row align-items-center gy-4">
<div class="col-lg-7">
<h2>Why Our Platform Works</h2>
<p>A concise value proposition goes here.</p>
</div>
<div class="col-lg-5">
<img src="images/feature.jpg" class="img-fluid rounded" alt="Feature">
</div>
</div>
</div>
</section>This is the kind of layout used extensively in Canvas demo pages. For a practical walkthrough of building a full product page with this structure, see Building a Micro-SaaS Landing Page with Bootstrap 5 and Canvas. If you want to extend your customisation further — including variable overrides and SASS compilation — Customising Bootstrap 5 With SASS: A Practical Workflow covers the full process.
Common Grid Mistakes and How to Fix Them
Even experienced developers trip over the same grid issues repeatedly. Here are the most frequent problems and their solutions:
- Columns overflowing the viewport: Almost always caused by a missing
.containeror a.rowplaced directly inside the<body>without a container. The negative row margins need a container’s padding to cancel against. - Columns not stacking on mobile: You have set a breakpoint class like
.col-md-6but never set.col-12for mobile. Without a base column class, Bootstrap defaults to auto-width, which may not stack as expected on very narrow screens. - Gutters causing unwanted horizontal scroll: Using
g-*classes on a row that is not inside a container causes the negative margin to extend beyond the viewport. Always pair rows with a container. - Nesting rows incorrectly: Nested rows must sit directly inside a column, not inside a container. Each nested row is itself divided into 12 columns relative to the width of its parent column — not relative to the full page width.
Frequently Asked Questions
What is the difference between .container and .container-fluid in Bootstrap 5?
.container applies a maximum width that increases at each breakpoint, keeping content centred with space on either side on large screens. .container-fluid stretches to 100% of the viewport at all times, with only the default horizontal padding applied. Use .container-fluid when you want edge-to-edge sections, and .container when you want content constrained to a readable width.
Do I need to write custom CSS to make Bootstrap 5 columns responsive?
Not for standard layouts. By combining breakpoint-specific column classes such as .col-12 .col-md-6 .col-lg-4 directly in your HTML, you can control behaviour across all six breakpoints without writing a single line of CSS. Custom CSS becomes necessary only when you need sizing or spacing values outside the 12-column grid.
Can I use the Bootstrap 5 grid inside the Canvas HTML Template without loading Bootstrap separately?
Yes. Canvas bundles Bootstrap 5 inside its own compiled files. Loading Bootstrap from a CDN on top of Canvas would duplicate styles and cause conflicts. All grid classes, utilities, and components described in the Bootstrap 5 documentation are available in Canvas as-is.
What does mobile-first mean in practice when writing grid classes?
Mobile-first means that a column class without a breakpoint infix — such as .col-6 — applies from 0px upward. A class with a breakpoint infix — such as .col-md-6 — applies from that breakpoint upward and overrides the base class. You build the narrowest layout first, then use additional classes to progressively enhance it for wider screens.
How many columns can I have in a single Bootstrap 5 row?
A row contains 12 column units. If the total column units in a row exceed 12, the overflowing columns wrap onto a new line. This wrapping behaviour is intentional and useful — a row of four .col-md-6 elements will display two columns on the first line and two on the second. You can also use .col without a number to let Bootstrap distribute available space equally among all columns in the row.
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.
