CSS tool
Bootstrap 5 Grid Calculator
Calculate exact column widths for any Bootstrap 5 breakpoint, see the pixel and percentage values instantly. Build full grid rows with the layout builder and copy the HTML markup.
Breakpoint
Column span: 6 / 12
col-lg-6Container width
960px
Column width (px)
468.0px
Column width (%)
48.75%
Gutter width
24px
Layout builder
0 / 12 columns usedWhat is the Bootstrap 5 grid system?
Bootstrap 5’s grid is a 12-column, flexbox-based layout system that adapts to five breakpoints. Wrap columns in a .row inside a .container and use classes like col-md-6 to control how many of the 12 columns each cell occupies.
The grid is mobile-first. A class like col-lg-4 means: full-width (stacked) below the lg breakpoint, and 4 columns wide (33%) at lg and above. Combine multiple classes on the same element to change the layout at different breakpoints: col-12 col-md-6 col-xl-4.
In the Canvas HTML Template, every multi-column section, features, pricing, team, portfolio, uses Bootstrap’s grid internally. Canvas extends Bootstrap with its own column helpers, but all Bootstrap grid classes work as-is. This calculator shows you the exact pixel widths you’ll get at each breakpoint so you can plan image sizes, component widths, and typography line lengths precisely.
Gutters in Bootstrap 5 are set with g-* on the .row element, the default is g-3 (1.5rem = 24px). Gutters are implemented as padding on columns, not margins, which means there’s no double-margin issue and the container’s negative margin trick from Bootstrap 4 is gone.
How to use this tool
- 1
Select a breakpoint (sm, md, lg, xl, xxl) to see its container width and column calculations.
- 2
Click a column number or drag the slider to see the pixel width, percentage width, and class name for that span.
- 3
Use the Layout Builder to compose a row, click 'Add column' and set the span for each column.
- 4
Watch the total column counter, it validates that your layout doesn't exceed 12 columns.
- 5
Click 'Copy HTML' to get ready-to-paste Bootstrap markup for your Canvas template.
Bootstrap 5 breakpoints reference
| Prefix | Min width | Container max-width | Class example |
|---|---|---|---|
| xs (none) | <576px | fluid | col-6 |
| sm | ≥576px | 540px | col-sm-6 |
| md | ≥768px | 720px | col-md-6 |
| lg | ≥992px | 960px | col-lg-6 |
| xl | ≥1200px | 1140px | col-xl-6 |
| xxl | ≥1400px | 1320px | col-xxl-6 |
Frequently asked questions
How many columns does Bootstrap 5 use?
Bootstrap 5 uses a 12-column grid by default. You can span any number of columns from 1 to 12 using classes like col-1, col-6, col-12. If you want equal-width columns without specifying a number, use the .col class and Bootstrap will divide the available space evenly.
What is the difference between .container and .container-fluid in Bootstrap 5?
.container has a fixed max-width at each breakpoint (e.g. 960px at lg, 1140px at xl). It is centred and adds horizontal padding. .container-fluid spans the full viewport width at every breakpoint. There are also responsive containers like .container-md which are fluid below the breakpoint and fixed above it.
How do I make equal-width columns in Bootstrap 5?
Use .col without a number, Bootstrap divides available space equally among all .col siblings. For example, three .col elements in a .row each take 33.33% width. Use .col-auto to size a column to its content width and let the remaining siblings fill the rest.
What are Bootstrap 5 gutters?
Gutters are the horizontal and vertical gaps between columns. Bootstrap 5 defaults to 1.5rem (24px at 16px root) using the g-3 class on .row. You can change them with g-0 through g-5, or use gx-* (horizontal only) and gy-* (vertical only). Gutters are applied as padding on .col elements, not margins.
How do I create a responsive layout in Bootstrap 5?
Stack column classes to define behaviour at each breakpoint. For example: class='col-12 col-md-6 col-lg-4' makes a column full-width on mobile, half-width at md, and one-third at lg. This mobile-first approach means you only need to define the breakpoints where the layout changes.
Grid figured out. Build the page
Canvas Builder writes the responsive grid layout for an entire page automatically.