CSS Tool
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
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.
Select a breakpoint (sm, md, lg, xl, xxl) to see its container width and column calculations.
Click a column number or drag the slider to see the pixel width, percentage width, and class name for that span.
Use the Layout Builder to compose a row — click 'Add column' and set the span for each column.
Watch the total column counter — it validates that your layout doesn't exceed 12 columns.
Click 'Copy HTML' to get ready-to-paste Bootstrap markup for your Canvas template.
| 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 |
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.
.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.
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.
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.
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.
Canvas Builder generates production-ready Bootstrap grid layouts using the Canvas HTML Template — in seconds, with your content and styles.
Try Canvas Builder