“Understanding Bootstrap Grid System for Medium Devices”
Introduction
When creating responsive websites, Bootstrap’s Grid System plays a vital role in ensuring your content looks great on every screen size. While most beginners focus on large and small screens, the medium breakpoint (md) is especially important — it targets devices like tablets and small laptops (≥768px).
In this blog, we’ll explore how to effectively use the Bootstrap Grid System for medium-sized devices using col-md-* classes.
What Are Bootstrap Breakpoints?
Bootstrap divides screens into several breakpoint ranges using predefined CSS classes:
| Breakpoint | Class Prefix | Screen Size |
|---|---|---|
| Extra Small | col- |
<576px |
| Small | col-sm- |
≥576px |
| Medium | col-md- |
≥768px |
| Large | col-lg- |
≥992px |
| Extra Large | col-xl- |
≥1200px |
The col-md-* class ensures the column layout activates on screens 768px and larger, and stacks vertically on smaller screens.
Basic Example Using col-md-*
✔️ What Happens:
-
On screens ≥768px, the two columns are displayed side by side (50% width each).
-
On screens <768px, the columns stack vertically.
3-Column Layout Example
Each column takes up 4 out of 12 grid columns on medium and larger screens — appearing side by side. On smaller screens, they will automatically stack.
Why Use col-md-*?
Using col-md-* is helpful when:
-
You want a layout optimized for tablets and laptops.
-
You want more control between small phones and large desktops.
-
You want to build fluid, responsive designs without writing custom media queries.
✅ Tips for Using Bootstrap Grid
-
Always wrap columns inside a
.rowwhich is inside a.containeror.container-fluid. -
Columns should always add up to 12 in a row (e.g., 6 + 6, 4 + 4 + 4).
-
You can combine breakpoints for more control (e.g.,
col-12 col-md-6 col-lg-4).
Real-World Use Case: Card Layout for Medium Screens
This displays cards in 3 columns on medium and larger screens and stacks them on smaller ones.
Conclusion
The col-md-* classes in Bootstrap give you precise control over layouts on medium-sized devices like tablets and small laptops. By understanding how breakpoints work, you can design beautiful, responsive layouts that work smoothly across all screens.
Use Bootstrap’s grid wisely — and your site will always look sharp and professional, no matter the device!
