How to use the Bootstrap Grid Playground
- 1. Set the spansType the column widths out of 12 for each breakpoint, such as 6,6,12 for md.
- 2. Drag the widthMove the preview-width slider to see which breakpoint is active.
- 3. Copy the HTMLPress Get Bootstrap HTML for the container, row and col classes.
How the Bootstrap grid works
Bootstrap splits every row into 12 columns. A class like col-md-6 means "take 6 of 12 columns (half the row) from the md breakpoint, 768px, and up". Below 768px the column falls back to the next smaller class, or to full width if there is none. The breakpoints are sm 576px, md 768px, lg 992px, xl 1200px and xxl 1400px.
Because classes apply from their breakpoint upwards, you only write a class where the layout changes. That is the mobile-first idea: describe the phone layout first, then add classes for bigger screens.
Worked example
With three columns, set all sizes to 12,12,12, md to 6,6,12 and lg to 4,4,4. The tool writes these classes:
- Column 1:
col-12 col-md-6 col-lg-4 - Column 2:
col-12 col-md-6 col-lg-4 - Column 3:
col-12 col-lg-4(md is still 12, so no col-md class is needed)
Drag the preview below 768px and the columns stack. Between 768px and 991px, the first two sit side by side and the third goes full width under them. From 992px, all three share the row equally. Spans that add up to more than 12 simply wrap onto a new line, which is normal in Bootstrap. The gutter option adds the g-0 to g-4 class, and g-4 (1.5rem) is Bootstrap's default.
Frequently asked questions
Is this Bootstrap 4 or 5?
Bootstrap 5. The xxl breakpoint and g-* gutter classes do not exist in Bootstrap 4.
Does the preview load Bootstrap?
No. It imitates the grid maths so it works offline. Add Bootstrap 5 CSS to your own page to use the code.
Why is column 3 missing a col-md class?
Its span did not change at md, so the col-12 class already covers it.
Is the playground free?
Yes, it is free. Getting the HTML the first time asks for your name and WhatsApp number once; after that every Uncodemy tool opens without it.