Bootstrap Grid Generator
Columns, offsets and gutters per breakpoint. Bootstrap 5 markup or plain CSS Grid.
<div class="container">
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-3">Column 1</div>
<div class="col-12 col-md-6 col-lg-3">Column 2</div>
<div class="col-12 col-md-6 col-lg-3">Column 3</div>
<div class="col-12 col-md-6 col-lg-3">Column 4</div>
</div>
</div>
Twelve columns, six breakpoints
Bootstrap's grid is simple until the classes stack up: col-12 col-sm-6 col-lg-4
offset-lg-2 across six breakpoints is hard to picture from the markup alone. Here you set
each column at each breakpoint and watch the row wrap at the real width. The classes are
written in Bootstrap's own mobile-first order.
01. Method
How to use it
-
Pick a breakpoint
Choose xs, sm, md, lg, xl or xxl. The preview jumps to that width, and any width you set applies from that breakpoint up.
-
Set each column
Give every column a span out of 12, an equal-width col, or auto. Leave it blank to inherit from the breakpoint below, which is how Bootstrap classes behave.
-
Add offsets and gutters
Push a column right with an offset, and set the gap between columns with g-0 to g-5.
-
Copy the markup
Take the Bootstrap 5 HTML, or the CSS Grid tab for the same layout without Bootstrap.
How the classes inherit
A class with a breakpoint infix applies from that width up, until a larger infix replaces it. That is why the editor leaves a tier blank to inherit instead of repeating a value: the markup you copy has one class per change, the same as you would write by hand.
Why columns wrap
A row holds 12 units. When the next column's span plus its offset would pass 12, it drops to
a new line. Two col-md-8 columns do not squeeze to fit; they stack. The preview
shows exactly where that happens as you drag the width.
The same layout in plain CSS Grid
The CSS Grid tab translates the layout to a 12-column grid with
grid-template-columns: repeat(12, minmax(0, 1fr)), placing each column with
grid-column per breakpoint. Use it to drop Bootstrap from a project or to
compare the two. Equal-width col and col-auto columns have no fixed
span, so the tab says so instead of guessing.
For anything past rows of columns, such as a sidebar spanning two rows or a layout that rearranges between breakpoints, Bootstrap's grid runs out. The CSS grid generator draws those directly, and CSS Grid vs Flexbox explains why a flex row cannot line items up in two directions. For the Tailwind equivalent, see the Tailwind grid generator.
02. Questions
Frequently asked questions
How does the Bootstrap grid work?
.row is a flex container split into 12 columns, and each child takes a share with a class such as col-md-6 (6 of 12, from the md breakpoint up). Classes are mobile-first, so col-12 col-md-6 col-lg-4 means full width on phones, half from 768px and a third from 992px.What are the Bootstrap 5 breakpoints?
col-lg-4, applies from that width up until a larger infix overrides it.What is the difference between col, col-6 and col-auto?
col-6 is a fixed 6 of 12 columns. col shares whatever space is left equally with the other col columns in the row. col-auto is only as wide as its content.What happens if a column has no class for the current breakpoint?
.row is full width, because Bootstrap gives every .row > * width: 100%.How do I change the gap between Bootstrap columns?
g-0 to g-5 sets both directions, gx-* only horizontal and gy-* only vertical. The default gutter is 1.5rem, the same as g-4.Does Bootstrap use CSS Grid?
.grid with .g-col-* classes), enabled with $enable-cssgrid: true in Sass. The CSS Grid tab here writes the equivalent plain CSS, with no Bootstrap at all.Can I nest Bootstrap rows?
.row inside any column and it gets its own 12 columns, sized from that column's width rather than the page.