📐 Bootstrap 5 – Grid Small (sm) Variants – Tablet-First Layouts Explained

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

Bootstrap 5’s sm breakpoint targets devices with a minimum width of 576px, typically landscape phones and tablets. By applying classes like .col-sm-6 or .col-sm-4, you can build responsive layouts that change starting from small screens while keeping full control over stacking on smaller devices.

🎯 In this guide, you’ll learn:

• What sm represents in Bootstrap’s breakpoint system
• How to use .col-sm-* for responsive design
• Real layout examples with live behavior
• Best practices for using sm grid classes

---

🧱 Bootstrap 5 Grid Breakpoint – sm Overview

Breakpoint Name	Class Prefix	Min Width	Common Devices
Small	sm	≥576px	Phones (landscape), tablets

• The sm breakpoint is the first defined breakpoint in Bootstrap’s system after xs (default).
• When you use .col-sm-*, that layout applies starting at 576px and up.

---

✅ Example 1 – Stack on Mobile, Side-by-Side on Small+

<div class="row">
  <div class="col-12 col-sm-6 bg-primary text-white p-3">Left</div>
  <div class="col-12 col-sm-6 bg-success text-white p-3">Right</div>
</div>

🔍 Explanation:

• On screens <576px, both columns are stacked (100% width)
• At ≥576px, each column takes 6/12 width (50%)

---

✅ Example 2 – Three Columns Responsive on Small+

<div class="row">
  <div class="col-12 col-sm-4 bg-warning p-3">Column A</div>
  <div class="col-12 col-sm-4 bg-info text-white p-3">Column B</div>
  <div class="col-12 col-sm-4 bg-secondary text-white p-3">Column C</div>
</div>

🔍 Explanation:

• Stacked layout on mobile
• Side-by-side 3-column grid on tablets and up

---

✅ Example 3 – Full Layout with Offsets at sm

<div class="row">
  <div class="col-sm-4 offset-sm-4 bg-light p-3 text-center">Centered Block</div>
</div>

🔍 Explanation:

• Column is pushed to center by offset-sm-4 on tablets and up
• Remains full width on mobile

---

✅ Example 4 – Order Change with order-sm-*

<div class="row">
  <div class="col-sm-6 order-sm-2 bg-success text-white p-3">Appear 2nd on sm+</div>
  <div class="col-sm-6 order-sm-1 bg-dark text-white p-3">Appear 1st on sm+</div>
</div>

🔍 Explanation:

• Default order on mobile
• Reorders at ≥576px using order-sm-*

---

🛠️ Best Practices for Small (sm) Grid Variants

Best Practice	Benefit
Use col-12 + col-sm-* combo	Ensures stacking on mobile and responsive layout on small+
Don’t rely on sm for all screens	Consider md, lg for full responsive design
Combine with gx-, gy- spacing	Improves UI spacing on small viewports
Avoid cramming too many columns	2–3 columns max at sm for readability
Use .container-sm for breakpoint-aligned content	Matches grid logic with container sizing

---

📌 Summary – sm Grid Variant Recap

Bootstrap 5’s sm grid classes help transition from stacked mobile layouts to horizontal tablet views starting at 576px. Use col-sm-*, offset-sm-*, and order-sm-* to structure adaptive, mobile-first interfaces.

🔍 Key Takeaways:

• sm breakpoint targets screens ≥576px
• Use .col-sm-* to shift from stacked to side-by-side layouts
• Combine with .col-12 for default mobile behavior
• Useful for tablets, landscape phones, and smaller desktops

⚙️ Perfect for responsive cards, form layouts, navigation sections, and grid-based content blocks.

---

❓ FAQs – Bootstrap 5 Small Grid Variants

❓ What is the screen width for the sm breakpoint?
✅ The sm breakpoint activates at 576px and above.

---

❓ Can I combine col-sm-* with col-md-*?
✅ Yes! This is how you build layered responsiveness across screen sizes.

---

❓ What happens if I skip defining col-sm-*?
✅ Bootstrap will apply .col-* (default) behavior on all screen sizes unless overridden.

---

❓ Is offset-sm-* available in Bootstrap 5?
✅ Yes. Use offset-sm-1 to offset-sm-11 to push columns horizontally.

---

Share Now :