What Is Bootstrap Grid?
The Bootstrap grid system is a responsive, 12-column layout framework built on CSS flexbox. It uses a series of containers, rows, and column classes to let developers build complex responsive layouts without writing custom CSS. Bootstrap 5's grid is mobile-first, columns are designed to collapse to full-width on mobile by default.
Grid structure: container, row, col
The Bootstrap grid has three layers. Container (.container or .container-fluid) sets the max-width and horizontal padding. Row (.row) creates a horizontal group of columns using negative margins. Columns (e.g. .col-md-6) define the width of each content block at specific breakpoints. Columns must always be direct children of rows.
Bootstrap 5 column classes
Column width classes follow the pattern col-{breakpoint}-{number}, where number is 1 to 12. For example: col-12 (full width always), col-md-6 (half width on medium screens and above), col-lg-4 (one-third on large screens), col-xl-3 (one-quarter on extra-large). Numbers in a row should total 12 (or less for gaps). Omitting the breakpoint (just col) creates equal-width columns.
Bootstrap 5 breakpoints
Bootstrap 5 has six responsive breakpoints: xs (<576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px). Column classes without a breakpoint prefix apply to all sizes. Classes with a prefix apply at that breakpoint and above (mobile-first). For example, col-md-6 col-12 means full-width on mobile, half-width on medium screens and above.
Nesting and offset
Bootstrap grids can be nested, a column can contain its own row and columns. Offset classes (offset-md-3) push a column to the right by a number of columns. The order classes (order-first, order-last, order-md-1) reorder columns visually without changing the HTML order, useful for mobile reordering.
Bootstrap Grid and Canvas Builder
Every page Canvas Builder generates uses Bootstrap 5's 12-column grid with proper responsive breakpoints. No manual grid setup needed, just describe your layout and the AI handles the columns.
Start building freeFrequently asked questions
How many columns does Bootstrap use?
Bootstrap uses a 12-column grid system. The number 12 was chosen because it's divisible by 2, 3, 4, and 6, making it easy to create halves, thirds, quarters, and sixths.
What is .container-fluid in Bootstrap?
.container-fluid creates a full-width container that spans 100% of the viewport width. Regular .container has a max-width that changes at each breakpoint, keeping content from stretching too wide on large screens.
Does Canvas Builder use the Bootstrap grid?
Yes, all HTML generated by Canvas Builder uses Bootstrap 5's grid system, with appropriate breakpoint classes for responsive behaviour across mobile, tablet, and desktop.