How to use the bootstrap grid generator
- Set the number of rows you need in your layout.
- Enter comma-separated column widths (1 to 12) for the base
xsbreakpoint. The values and offsets in a row must not add up to more than 12. - Optionally fill in SM, MD, LG, XL, or XXL fields to override column widths at larger breakpoints.
- Add offsets if you need empty space before a column, ensuring width plus offset does not exceed 12.
- Click Generate to produce validated Bootstrap 5 HTML and copy it into your project.
How the Bootstrap 5 Grid System Works
Bootstrap 5 uses a 12-column flexbox grid. Every row is divided into 12 equal units, and you assign columns using classes like col-4 (spanning 4 of 12 units, or one-third). When building a layout with a bootstrap grid builder, the fundamental rule is that column values within a single row must sum to 12 or fewer. If they exceed 12, the extra columns wrap to a new line, which usually breaks the intended design.
Breakpoints control when column rules change. The tiers are xs (no infix, under 576px), sm (576px and up), md (768px), lg (992px), xl (1200px), and xxl (1400px). Classes cascade upward: a col-md-6 applies at medium screens and all larger ones unless overridden by col-lg-4, for example. This mobile-first approach means you define the smallest layout first, then adjust for wider viewports.
Common Grid Layout Reference
This table shows standard column configurations you can generate with any grid builder bootstrap tool. Use these as starting points for typical UI patterns.
| Layout | Column classes | Sum |
|---|---|---|
| Full width | col-12 | 12 |
| Halves | col-6 + col-6 | 12 |
| Thirds | col-4 x 3 | 12 |
| Quarters | col-3 x 4 | 12 |
| Sidebar + content | col-3 + col-9 | 12 |
| Content + sidebar | col-8 + col-4 | 12 |
| Golden ratio approx. | col-5 + col-7 | 12 |
Using Offsets and Gutters
Offsets push a column to the right by adding empty grid units before it. The class offset-md-3 adds three empty columns at the medium breakpoint. A critical constraint: the column width plus its offset must not exceed 12. For instance, col-6 offset-6 fills the row exactly, but col-8 offset-6 totals 14 and will cause wrapping.
Gutters are the spacing between columns. Bootstrap 5 replaced the old no-gutters class with utility classes like g-0 through g-5. These apply to the row element. You can also use gx-* for horizontal gutters and gy-* for vertical ones. When using a bootstrap grid generator, selecting the correct gutter ensures consistent spacing without writing custom CSS.
Nesting Rows Inside Columns
You can place a new .row inside any column to create sub-grids. The nested row resets the 12-column count, so you again have 12 units to distribute within that parent column. This is essential for complex dashboards or card layouts where a single outer column contains multiple inner elements.
When nesting, always ensure the parent column has enough width to make the inner grid usable. Nesting a 12-column grid inside a col-2 creates extremely narrow children. A bootstrap grid builder helps visualize these relationships before you write the markup, preventing deeply nested structures that harm readability and performance.
Mistakes to Avoid
The most frequent error is letting column sums exceed 12. While Bootstrap will not crash, the overflowing columns wrap unpredictably. Always validate your sums across every breakpoint. Another mistake is forgetting that classes apply upward: col-8 stays in force on every screen size until a larger tier such as col-sm-6 overrides it, so always check what the layout does at each breakpoint.
Forgetting the .row wrapper is another common issue. Columns must be direct children of a row; otherwise, negative margins used for gutters break the layout. Finally, avoid hard-coding pixel widths on grid columns, as this defeats the purpose of the flexible 12-column system. Let the bootstrap grid generator handle the math so your layout remains responsive.
Worked examples
| Example | Input | Result |
|---|---|---|
| Two equal columns | Number of rows: 1; Columns per row (comma-separated): 6,6 | <div class="row"> / <div class="col-6"> / <!-- Column 1 content --> / </div> / <div class="col-6"> / <!-- Column 2 content --> / </div> / </div> |
| Three columns with responsive breakpoints | Number of rows: 1; Columns per row (comma-separated): 12; MD columns (≥768px): 4,4,4 | <div class="row"> / <div class="col-12 col-md-4"> / <!-- Column 1 content --> / </div> / </div> |
| Sidebar layout with offset | Number of rows: 1; Columns per row (comma-separated): 3,6; Offsets (comma-separated): 0,3 | <div class="row"> / <div class="col-3"> / <!-- Column 1 content --> / </div> / <div class="col-6 offset-3"> / <!-- Column 2 content --> / </div> / </div> |
| Two rows, no gutters, in container | Number of rows: 2; Columns per row (comma-separated): 4,4,4; Gutter class: g-0; Wrap in container: yes | <div class="container"> / <div class="row g-0"> / <div class="col-4"> / <!-- Column 1 content --> / </div> / <div class="col-4"> / <!-- Column 2 content --> / </div> / <div class="col-4"> / <!-- Column 3 content --> / </div> / </div> / <div class="row g-0"> / <div class="col-4"> / <!-- Column 1 content --> / </div> / <div class="col-4"> / <!-- Column 2 content --> / </div> / <div class="col-4"> / <!-- Column 3 content --> / </div> / </div> / </div> |
FAQ
What is a bootstrap grid builder?
A bootstrap grid builder is a tool that helps you visually or programmatically define rows and columns for the Bootstrap 5 grid system. It generates the correct HTML classes like col-md-6 and validates that your layout follows the 12-column rule.
Do column values always need to sum to 12?
They should sum to 12 or fewer per row. If they exceed 12, the extra columns wrap to the next line. Summing to less than 12 leaves empty space on the right side of the row.
How do offsets work in Bootstrap 5?
Offsets add empty columns before an element using classes like offset-3 or offset-md-2. This tool writes the plain offset-N form, which applies at every breakpoint, so the column width plus the offset must not exceed 12 at any of them.
Can I use this bootstrap grid generator offline?
Yes. The tool runs entirely in your browser using JavaScript. No data is sent to a server, so it works offline once the page is loaded.
What changed in the Bootstrap 5 grid compared to Bootstrap 4?
Bootstrap 5 added the xxl breakpoint for screens 1400px and wider. It also replaced no-gutters with g-0 and introduced gx and gy utilities for independent horizontal and vertical gutter control.
Why use a grid builder bootstrap tool instead of writing HTML manually?
Manual calculation of column sums across six breakpoints is error-prone. A grid builder bootstrap tool validates constraints instantly, saving debugging time and preventing layout overflow issues.