Visually build Bootstrap 5 grid layouts. Choose columns, gutters, breakpoints and copy the ready-to-use HTML instantly.
Select the number of columns, gutter size and container type (fluid or fixed-width).
Assign column widths at xs, sm, md, lg and xl breakpoints using the selectors for each column.
Click Copy HTML to get the ready-to-paste Bootstrap 5 row and col markup.
The generator outputs Bootstrap 5 markup. It uses the standard .container, .row and .col-{breakpoint}-{size} class naming convention from Bootstrap 5.x.
Bootstrap's grid divides each row into 12 equal units. A col-md-6 takes up 6 of those 12 units (50% width). You can mix and match columns as long as their sizes add up to 12 or less per row.
.container has a fixed max-width at each breakpoint, centering your content with horizontal padding. .container-fluid stretches to 100% of the viewport width at all sizes.
These are Bootstrap's responsive breakpoints. xs applies from 0px up, sm from 576px, md from 768px, lg from 992px and xl from 1200px. Classes stack upward — a col-md-6 applies to md and all wider screens.
Yes. Bootstrap supports nesting — you can place a .row inside a .col element, and the inner row will again have 12 columns relative to the outer column's width.
Gutters are the horizontal and vertical gaps between columns. Bootstrap 5 uses gx-* (horizontal) and gy-* (vertical) utility classes on the .row element to control gap size, from g-0 (no gap) to g-5 (large gap).
Yes. The generated HTML uses Bootstrap class names which only work when Bootstrap's CSS is loaded in your project — either via CDN link or npm package.
col-auto makes a column as wide as its content, without consuming a set number of the 12 grid units. Useful for columns that should be just wide enough to fit their contents.
Yes. The grid system is purely CSS-based. Bootstrap JS is only required for interactive components like modals, dropdowns and tooltips — not for the grid layout.
Use col-12 col-md-6. This makes the column 12 units (full width) by default, switching to 6 units (half width) at the md breakpoint and above.
