Glossary

What Is Bootstrap Grid?

Q: 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.

Q: 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.

Q: 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.

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–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 & 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.

Try Canvas Builder →

Frequently 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.