Use the Bootstrap Grid Generator to build a responsive row-and-column layout visually and get clean, copy-paste HTML — no manual class-counting, no signup required.
Add rows, set column widths per breakpoint, and the tool outputs ready-to-use Bootstrap markup for both Bootstrap 5 and Bootstrap 4.
Live Preview
Generated Code
Paste this inside a page that loads Bootstrap CSS/JS. This tool does not load Bootstrap itself — it only generates the markup.
How It Works
The generator builds your grid the same way Bootstrap does: a container wraps one or more row elements, and each row holds col-* elements that add up to 12 units per breakpoint.
Set a width for each column at each screen size (XS through XXL), and the tool assembles the matching classes — col-md-6, offset-lg-2, order-sm-1, and so on — automatically. Switch the version toggle to Bootstrap 4 and the generator adjusts the output to that version’s grid classes and gutter system instead.
The live preview updates as you build, so you can see how the layout reflows across breakpoints before you copy anything.
When to Use This Tool
- Prototyping a page layout fast — sketch out a hero section, sidebar, or card grid visually instead of writing
col-*classes from memory. - Migrating a layout between Bootstrap versions — toggle between BS5 and BS4 output to see how gutter and container classes differ for the same layout.
- Handing off clean markup to a client site — generate the grid structure once, then style the content inside each column.
FAQ
What is a Bootstrap grid?
A Bootstrap grid is a 12-column, mobile-first layout system built with container, row, and col-* classes that lets a page reflow across screen sizes without custom CSS.
How do I make a responsive grid in Bootstrap?
Wrap your content in a container, place a row inside it, and add col-* elements with breakpoint-specific classes (like col-md-6) so column widths change at different screen sizes — this generator builds that structure for you automatically.
What’s the difference between the Bootstrap 4 and Bootstrap 5 grid?
Bootstrap 5 adds an xxl breakpoint and switches to a numeric gutter scale (g-0 through g-5, plus gx-*/gy-* for per-axis control), while Bootstrap 4’s grid tops out at the xl breakpoint and only supports a default gutter or removing gutters entirely with no-gutters.
Does this tool require Bootstrap to work?
No — the generator produces standard Bootstrap grid markup, but the classes only take effect once you paste them into a page that already loads Bootstrap’s CSS (and JS, if your layout uses Bootstrap components elsewhere).