What Is Bootstrap 5 Grid System?
The Bootstrap 5 Grid System is a responsive, mobile-first layout framework built on CSS Flexbox that divides a page into 12 equal columns across six breakpoint tiers (xs, sm, md, lg, xl, xxl). It uses a container-row-column hierarchy where columns are sized using predefined classes like `col-md-6` or `col-lg-4`, and automatically reflow at specified viewport widths defined in Bootstrap's Sass variable map. Unlike its Bootstrap 4 predecessor, version 5 removes the jQuery dependency entirely and introduces a new `xxl` breakpoint at 1400px.
What Is Bootstrap 5 Grid System?
The Bootstrap 5 Grid System is a responsive, mobile-first layout framework built on CSS Flexbox that divides a page into 12 equal columns across six breakpoint tiers (xs, sm, md, lg, xl, xxl). It uses a container-row-column hierarchy where columns are sized using predefined classes like `col-md-6` or `col-lg-4`, and automatically reflow at specified viewport widths defined in Bootstrap's Sass variable map. Unlike its Bootstrap 4 predecessor, version 5 removes the jQuery dependency entirely and introduces a new `xxl` breakpoint at 1400px.
How Bootstrap 5 Grid System Works
The grid is anchored by three structural layers: containers, rows, and columns. Containers (`container`, `container-fluid`, or responsive container variants like `container-md`) establish the horizontal max-width and horizontal padding (called gutters). A `container` has fixed max-widths at each breakpoint — for example, 960px at `md` and 1140px at `lg` — while `container-fluid` spans 100% of the viewport at all times. Rows use `display: flex` with `flex-wrap: wrap` and negative horizontal margins to counteract the column padding, ensuring proper edge alignment. Columns are flex children that use `flex: 0 0 auto` with a calculated `width` percentage. A `col-md-6` class computes to `width: 50%` because 6 out of 12 columns equals 50%. Bootstrap generates these widths via Sass loops, so the math is consistent and predictable. When no column width class is specified (just `col`), Bootstrap distributes remaining space equally among all auto-width columns using `flex: 1 0 0%`. This makes auto-layout columns particularly useful for equal-width distributions without hardcoding sizes. Breakpoints are defined as min-width media queries in Bootstrap's `_variables.scss`: `sm` starts at 576px, `md` at 768px, `lg` at 992px, `xl` at 1200px, and `xxl` at 1400px. Because Bootstrap is mobile-first, a class like `col-md-8` applies from 768px and up — below that breakpoint, the column defaults to full width (`width: 100%`). This cascade means you only need to define a layout at the point where it changes, reducing the total number of classes needed. Gutters in Bootstrap 5 were redesigned from Bootstrap 4's fixed padding to a CSS custom property system using `--bs-gutter-x` and `--bs-gutter-y`. Gutter utility classes (`g-0` through `g-5`, or axis-specific `gx-*` and `gy-*`) dynamically set these custom properties, which are then consumed by the row and column CSS rules. This approach allows runtime gutter adjustments without Sass recompilation and enables vertical gutters — a significant gap from Bootstrap 4, which had no native vertical gutter control.
Best Practices for Bootstrap 5 Grid System
Always start with mobile column classes and layer larger breakpoints on top — for example, `col-12 col-md-6 col-lg-4` gives you a stacked single column on phones, a two-column layout on tablets, and a three-column layout on desktops. Avoid nesting rows more than two levels deep; each nested row resets the 12-column count within its parent column, which can produce unexpected layouts and makes the DOM unnecessarily deep. Use `col` (auto-width) for equal-width columns rather than explicitly writing `col-6 col-6`, which becomes brittle if you add a third column later. Leverage `offset-*` classes sparingly — if you find yourself using many offsets to center content, consider switching to Bootstrap's `justify-content-center` on the row with auto-width columns, which is more semantically correct and easier to maintain. Use responsive gutter classes (`gx-2 gx-md-4`) rather than adding manual padding to columns, since manual padding breaks the grid's internal margin compensation and causes alignment drift at container edges.
Bootstrap 5 Grid System & Canvas Builder
CanvasBuilder generates HTML using the Canvas template, which is built on Bootstrap 5, so every layout section it produces — hero blocks, feature grids, pricing tables, footers — uses proper Bootstrap 5 grid markup with responsive column classes, semantic container structures, and gutter utilities rather than inline styles or custom CSS hacks. This means the output is immediately editable by any developer who knows Bootstrap 5, and the responsive behavior works out of the box without additional CSS. The clean, standards-compliant HTML output also ensures compatibility with Bootstrap 5 component upgrades and makes it straightforward to integrate the generated code into existing Bootstrap-based projects.
Try Canvas Builder →