🧱 Bootstrap 5 – Grid Variants: Stacked & Horizontal Grids

Bootstrap 5’s grid system is powerful, responsive, and highly customizable. One of its key strengths lies in its grid variants—especially stacked (vertical) grids and horizontal grids. Understanding how these work helps developers create layouts that adapt beautifully to all screen sizes.

In this article, you’ll learn how to use Bootstrap’s grid system effectively using stacked and horizontal layouts, including syntax, breakpoints, and best practices.

---

🧱 What is the Bootstrap Grid System?

The Bootstrap 5 grid system is based on Flexbox and uses a 12-column layout. It’s responsive by default, allowing you to design UIs that adapt across screen sizes.

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
  </div>
</div>

📌 Key Concepts:

• Containers: .container or .container-fluid wraps content.
• Rows: .row creates a horizontal group of columns.
• Columns: .col defines the number of columns.

---

🧱 Stacked Grid (Vertical Layout)

In Bootstrap, columns stack vertically by default on smaller screens.

<div class="row">
  <div class="col-12">Full width on all devices</div>
  <div class="col-6">Stacked on small devices</div>
  <div class="col-6">Stacked on small devices</div>
</div>

✅ Behavior:

• Columns stack vertically until a breakpoint is reached.
• Ideal for mobile-first design.

---

🧱 Horizontal Grid (Multi-column Layout)

By using breakpoint-specific column classes like col-md-*, you can create horizontal layouts for medium and larger screens.

<div class="row">
  <div class="col-md-4">One-third width</div>
  <div class="col-md-4">One-third width</div>
  <div class="col-md-4">One-third width</div>
</div>

🔁 Breakpoint Behavior:

• Becomes horizontal from md (≥768px) and stays so on larger screens.
• Stacked on smaller screens (<768px).

---

📐 Responsive Breakpoints

Bootstrap 5 supports these breakpoints:

Breakpoint	Class Prefix	Min Width
Extra small	.col-	<576px
Small	.col-sm-	≥576px
Medium	.col-md-	≥768px
Large	.col-lg-	≥992px
Extra large	.col-xl-	≥1200px
XXL	.col-xxl-	≥1400px

You can mix and match classes like:

<div class="col-12 col-sm-6 col-lg-3">Responsive Column</div>

---

🧩 Grid Classes Used

Class	Description
.row	Creates a row wrapper
.col	Equal-width column
.col-*	Fixed-width column
.col-{breakpoint}-*	Responsive layout at breakpoint
.g-* or .gx-* / .gy-*	Control grid gutters (spacing)

---

🛠️ Examples

🔹 Mobile-first (Stacked)

<div class="row">
  <div class="col-12">Header</div>
  <div class="col-12">Main Content</div>
  <div class="col-12">Footer</div>
</div>

🔹 Desktop-first (Horizontal Layout)

<div class="row">
  <div class="col-md-8">Content</div>
  <div class="col-md-4">Sidebar</div>
</div>

---

✅ Best Practices

• Use mobile-first design (.col-12 stacking first, then layout horizontally at breakpoints).
• Keep layout fluid with .container-fluid for full-width designs.
• Use .gx-* and .gy-* to manage spacing without extra wrappers.
• Avoid over-nesting rows and columns—it complicates your layout.

---

🧾 Summary

Type	Description	Example
Stacked Grid	Columns stack on small screens	.col-12, .col-sm-12
Horizontal Grid	Columns arranged side by side on breakpoints	.col-md-6, .col-lg-4
Responsive Layout	Mix both based on breakpoints	.col-12 col-sm-6 col-lg-4

Bootstrap’s grid system enables dynamic, responsive, and powerful layouts that work on all devices with minimal code.

---

❓ FAQ – Bootstrap Grid Variants

Q1. What’s the default behavior of Bootstrap columns?

They stack vertically by default (stacked layout) on smaller screens.

---

Q2. How do I make columns horizontal only on desktop?

Use breakpoint classes like .col-md-* to arrange them side-by-side from medium screen sizes upwards.

---

Q3. Can I mix stacked and horizontal grids?

Yes! Combine responsive column classes to create flexible layouts that stack or align based on screen size.

---

Share Now :