Bootstrap Grid – Medium Devices
Bootstrap Grid – Medium Devices
Bootstrap offers responsive grid classes to control how layout behaves on different screen sizes. For medium devices, such as tablets and small laptops, you use the class prefix:
➡️ This applies to screens ≥ 768px wide.
If the screen width is below 768px, columns will automatically stack vertically unless another smaller breakpoint class is used.
📌 Example: Equal Columns on Medium Devices
Behavior:
📱 Phones < 768px →
💻 Medium screens ≥768px →
📌 Two Column Layout
✔ Creates a 50/50 layout on medium screens and above.
📌 Mixed Width Example
📌 Responsive Example (XS → SM → MD)
✔ Adjusts automatically at every breakpoint.
📌 Summary Table
| Breakpoint Class | Screen Width | Behavior |
|---|---|---|
.col-md-* | ≥ 768px | Columns display horizontally |
| Smaller Devices | < 768px | Columns become full-width stacked |
🎯 When to Use col-md-*?
Use medium classes when:
✔ Layout should change starting from tablets
✔ You want different layout behavior between mobile and larger screens
✔ You need a clean responsive design without extra media queries
