Bootstrap Grid Examples

Bootstrap Grid System Examples – From Basic to Advanced

The Bootstrap Grid System is one of the most powerful features of the framework. It’s flexible, mobile-first, and built on top of CSS Flexbox. Whether you’re a beginner or looking to polish your layout skills, these examples will help you master the grid.

✅ 1. Basic 2-Column Layout

Result:

• 50% width each on all screen sizes (col-6 + col-6 = 12)

✅ 2. Responsive Columns (col-sm, col-md, col-lg)

Result:

• Stacks on mobile

• Side-by-side on tablets (≥768px)

✅ 3. 3 Equal Columns

Result:

• 3 equal columns across all screen sizes

✅ 4. Nested Grid (Grid Inside a Grid)

Result:

• Demonstrates nesting a .row inside a column

✅ 5. Auto Layout Columns

Result:

• Automatically equal-width columns

• No need to specify numbers like col-4

✅ 6. Mixed Widths with Auto Columns

Result:

• First column takes 25%, second takes remaining space

✅ 7. Responsive Card Grid Example

Result:

• Cards stack on small screens

• Two per row on tablets

• Three per row on desktops

Tips for Using Bootstrap Grid

• Use .container or .container-fluid for layout wrapping

• Always place .col-* inside a .row

• Columns add up to 12 in each row

• Use responsive classes (col-sm-*, col-md-*, etc.) for adaptive layouts

Conclusion

Bootstrap’s grid system is powerful, flexible, and easy to learn. These examples cover most of the layouts you’ll need for modern web development. Once you understand the 12-column rule and responsive breakpoints, you’re good to go!