🧱 Bootstrap 5 – Grid Medium (md) Variants – Tablet and Small Desktop Layouts

🧲 Introduction – What Is the md Grid in Bootstrap 5?

In Bootstrap 5, the md breakpoint applies to screen sizes ≥768px, which includes tablets in landscape orientation and smaller desktop monitors. It helps developers create responsive layouts that kick in after the small (sm) breakpoint and before large (lg).

🎯 In this guide, you’ll learn:

• What .col-md-* does in the grid system
• How it compares to xs and sm classes
• Examples of real-world md usage
• Best practices for layouts targeting medium devices

---

📐 Bootstrap 5 md Breakpoint Overview

Breakpoint	Class Prefix	Min Width	Typical Devices
Medium	md	≥768px	Tablets (landscape), small desktops

The md variant is especially helpful when designing layouts that should stack on small screens but become multi-column on larger displays like tablets.

---

✅ Example 1 – Two-Column Layout from Medium Up

<div class="row">
  <div class="col-12 col-md-6 bg-light p-3">Left Content</div>
  <div class="col-12 col-md-6 bg-secondary text-white p-3">Right Content</div>
</div>

🔍 Explanation:

• Stacks vertically on screens <768px
• Switches to side-by-side layout starting from md (≥768px)

---

✅ Example 2 – Three Equal Columns on md and Up

<div class="row">
  <div class="col-12 col-md-4 bg-warning p-3">One</div>
  <div class="col-12 col-md-4 bg-info text-white p-3">Two</div>
  <div class="col-12 col-md-4 bg-dark text-white p-3">Three</div>
</div>

🔍 Output:

• 100% stacked layout on mobile
• 3-column horizontal layout on tablets and desktops ≥768px

---

✅ Example 3 – Centering Content with offset-md-*

<div class="row">
  <div class="col-md-6 offset-md-3 bg-primary text-white text-center p-4">Centered Content</div>
</div>

🔍 Explanation:

• Offset pushes the column 3 units right
• Result: centered 6-column wide content on medium+ screens

---

✅ Example 4 – Reordering with order-md-*

<div class="row">
  <div class="col-md-6 order-md-2 bg-success text-white p-3">Second</div>
  <div class="col-md-6 order-md-1 bg-info text-white p-3">First</div>
</div>

🔍 Output:

• Default source order applies on small screens
• At ≥768px, columns switch positions

---

✅ Example 5 – Nesting Inside md Grid

<div class="row">
  <div class="col-md-8 bg-light p-3">
    <div class="row">
      <div class="col-6 bg-warning p-2">Nested A</div>
      <div class="col-6 bg-secondary text-white p-2">Nested B</div>
    </div>
  </div>
  <div class="col-md-4 bg-dark text-white p-3">Side Column</div>
</div>

🔍 Explanation:

• Nested row appears inside the medium-sized main content
• Ideal for forms, dashboards, or feature blocks

---

🛠️ Best Practices for md Grid Layouts

Tip	Why It’s Useful
Use col-12 + col-md-* for mobile-first layouts	Ensures stacking on smaller screens
Avoid overloading md rows with columns	2–3 columns work best for tablets
Combine with gx-* / gy-* for spacing	Improves readability on medium screens
Use offset-md-* for alignment	Great for centering forms or cards
Nest grids carefully to avoid layout breaks	Keeps responsive behavior intact

---

📌 Summary – Responsive Layouts with Bootstrap 5 md

The md variant in Bootstrap 5 offers the sweet spot between mobile and large desktop layouts. It’s especially useful when designing interfaces that must adapt cleanly from stacked to grid layouts at 768px+.

🔍 Key Takeaways:

• md breakpoint starts at 768px (tablets in landscape)
• Use col-md-* for horizontal layouts that stack below md
• Supports offset-md-*, order-md-*, and responsive utilities
• Nesting and spacing should be planned for mid-sized screens

⚙️ Perfect for marketing sections, dashboard cards, forms, and responsive tables.

---

❓ FAQs – Bootstrap 5 Medium Grid Variants

❓ What screen size does the md breakpoint target?
✅ md starts at 768px (tablets in landscape and up)

---

❓ Can I use col-md-* and col-lg-* together?
✅ Yes. This enables granular control across multiple breakpoints.

---

❓ What happens if I don’t define a col-md-* class?
✅ The layout will follow lower breakpoint behavior (col-* or col-sm-*)

---

❓ Is it okay to use col-md without col-12?
✅ Yes. But using both ensures mobile stacking before md.

---

Share Now :