🧪 Bootstrap 5 – Grid Examples & Demos for Responsive Layouts
🧲 Introduction – Real-World Grid Examples in Bootstrap 5
Bootstrap 5’s grid system is flexible, responsive, and mobile-first. In this guide, we’ll walk through live layout examples that use .container, .row, .col, and responsive classes to demonstrate practical, production-style grid implementations.
🎯 In this guide, you’ll learn:
- How to build real-world layouts using Bootstrap’s grid system
- Responsive behaviors using breakpoints (
sm,md,lg, etc.) - How columns wrap, auto-size, and nest in practice
- Clean examples with live behaviors and output descriptions
✅ Example 1 – Basic Two-Column Layout
<div class="container">
<div class="row">
<div class="col bg-light p-3">Left Column</div>
<div class="col bg-secondary text-white p-3">Right Column</div>
</div>
</div>
🔍 Output:
- Two columns of equal width across all screen sizes.
- Responsive by default due to
.col.
✅ Example 2 – Responsive Three-Column Layout
<div class="container">
<div class="row">
<div class="col-12 col-md-4 bg-warning p-3">Column A</div>
<div class="col-12 col-md-4 bg-info text-white p-3">Column B</div>
<div class="col-12 col-md-4 bg-success text-white p-3">Column C</div>
</div>
</div>
🔍 Output:
- Full width on mobile (stacked layout)
- 3 equal columns on tablets and up (
≥768px)
✅ Example 3 – Mixed Width Layout with Breakpoints
<div class="container">
<div class="row">
<div class="col-6 col-lg-3 bg-light p-3">25% on lg+</div>
<div class="col-6 col-lg-6 bg-dark text-white p-3">50% on lg+</div>
<div class="col-12 col-lg-3 bg-primary text-white p-3">25% on lg+</div>
</div>
</div>
🔍 Output:
- Two half-width columns on mobile.
- On large screens: 25% – 50% – 25% layout.
✅ Example 4 – Auto Layout with Uneven Content
<div class="container">
<div class="row">
<div class="col bg-info text-white p-3">Short Text</div>
<div class="col bg-secondary text-white p-3">Longer text content goes here to test column stretch</div>
</div>
</div>
🔍 Output:
- Both columns share equal width by default.
- Useful for content that doesn’t need precise sizing.
✅ Example 5 – Nesting Columns Inside Columns
<div class="container">
<div class="row">
<div class="col-6 bg-light p-3">
<div class="row">
<div class="col-6 bg-warning p-2">Nested 1</div>
<div class="col-6 bg-success text-white p-2">Nested 2</div>
</div>
</div>
<div class="col-6 bg-primary text-white p-3">Right Side</div>
</div>
</div>
🔍 Output:
- A two-column layout.
- First column contains two nested columns (each 50% width).
✅ Example 6 – No Gutters with .g-0
<div class="container">
<div class="row g-0">
<div class="col-6 bg-danger text-white p-3">No gutter</div>
<div class="col-6 bg-info text-white p-3">No gutter</div>
</div>
</div>
🔍 Output:
- Removes spacing between columns entirely.
- Useful for edge-to-edge layout (like image grids or banners).
✅ Example 7 – Vertical Gutter with .gy-*
<div class="container">
<div class="row gy-3">
<div class="col-12 col-md-6 bg-light p-3">Top Row</div>
<div class="col-12 col-md-6 bg-secondary text-white p-3">Bottom Row</div>
</div>
</div>
🔍 Output:
- Adds vertical spacing (
gy-3) only. - Horizontal spacing remains tight.
🛠️ Best Practices for Grid Implementation
| Tip | Why It’s Useful |
|---|---|
Use .container for consistent width | Ensures grid is properly padded |
Mix col- sizes with breakpoints | Delivers better responsive behavior |
Use .g-0 to .g-5 for gutter control | Customizes spacing cleanly |
Nest .row inside .col-* only | Prevents layout breakage |
Use .order-* and .offset-* for alignment | Helps position content smartly |
📌 Summary – Key Takeaways
Bootstrap’s grid system gives you clean, responsive layouts without writing any custom CSS. The examples above show how to build real layouts using just utility classes.
🔍 Key Takeaways:
- Use
.container→.row→.col-*to structure layouts - Responsive columns (
col-md-4,col-lg-6) adapt to screen sizes - Gutters (
g-*,gx-*,gy-*) control spacing between columns - Nesting enables advanced grid layouts within columns
⚙️ Use these demos to build hero sections, content blocks, forms, footers, dashboards, and more—without writing custom media queries.
❓ FAQs – Bootstrap 5 Grid Examples
❓ Can I mix auto and fixed columns in the same row?
✅ Yes. Combine .col and .col-6 to share and define widths as needed.
❓ How do I remove spacing between columns?
✅ Use .g-0 on the row to remove all gutter spacing.
❓ Can I make grids responsive only on large screens?
✅ Yes. Use classes like col-lg-4 and col-12 to control layout across breakpoints.
❓ How do I vertically align columns?
✅ Add align-items-center to the .row, or use individual .align-self-* classes on columns.
❓ Can I wrap more than 12 columns in one row?
✅ Yes. Columns will automatically wrap to the next line after 12 total units.
Share Now :
