Bootstrap Grid Layout Tool

Visually create responsive Bootstrap grid layouts with comprehensive breakpoint customization and instant HTML generation. This layout design tool features drag-and-drop grid creation, responsive breakpoint configuration for all device sizes, column offset and ordering options, and nested grid support. Perfect for responsive web design, layout prototyping, Bootstrap education, and creating complex multi-column layouts efficiently with professional responsive behavior across all devices.

Drag-and-Drop Grid Creation Responsive Breakpoints Column Offset & Ordering Nested Grid Support

Preview

Basic: <div class="row"><div class="col">...</div></div>

Responsive: <div class="col-sm-6 col-md-4">...</div>

Offset: <div class="col-md-6 offset-md-3">...</div>

Grid Designer Toolbar

Framework Version:

Container Type:

Preview Mode:

Quick Actions:

Quick Templates:

Grid Builder

Tips: Drag to reorder rows/columns. Click settings for advanced options.

Click "Add Row" to start building your grid layout

Live Preview

Bootstrap Grid System Reference

Breakpoints

Size	Width	Class
XS	<576px	col-
SM	≥576px	col-sm-
MD	≥768px	col-md-
LG	≥992px	col-lg-
XL	≥1200px	col-xl-
XXL	≥1400px	col-xxl-

Common Patterns

col-12 - Full width

col-6 - Half width

col-4 - One third

col-3 - One quarter

col-auto - Auto sizing

col-md-6 col-lg-4 - Responsive

Utilities

g-0 - No gutters

g-3 - Medium gutters

justify-content-center - Center

align-items-center - Middle

text-center - Center text

d-none d-md-block - Hide/show

Responsive Column Sizes

XS (<576px)

SM (≥576px)

MD (≥768px)

LG (≥992px)

XL (≥1200px)

XXL (≥1400px)

Help & Related Tools

Everything you need to know

FAQ Frequently Asked Questions

How does Bootstrap's grid system work?

Bootstrap uses a 12-column grid system with responsive breakpoints. You can specify different column widths for different screen sizes (xs, sm, md, lg, xl) to create layouts that adapt perfectly to any device.

Can I create nested grids within columns?

Yes, the tool supports nested grids where you can place new rows and columns inside existing columns. This allows for complex, hierarchical layouts while maintaining responsive behavior.

What are column offsets and how do I use them?

Column offsets push columns to the right by adding margin. Use offsets to center content, create white space, or align columns precisely. The tool provides visual controls for setting offsets at different breakpoints.

Can I reorder columns on different screen sizes?

Yes, Bootstrap's order classes allow you to change column order at different breakpoints. This is useful for prioritizing content on mobile or rearranging layouts for better user experience on various devices.

How do I preview my grid on different screen sizes?

The tool typically includes device simulation or preview modes that show how your grid layout appears on mobile, tablet, and desktop screens. This helps ensure your layout works well across all devices.