Bootstrap Grid – Large Devices
Bootstrap Grid – Large Devices
Bootstrap provides responsive grid classes to control layouts across different screen sizes. For large devices such as desktops and wide screens, you use the class prefix:
➡️ This applies to screens ≥ 992px wide.
If the screen width is smaller than 992px, the grid layout automatically adapts (Stacks or follows smaller breakpoints).
📌 Basic Example: Equal Columns on Large Devices
Behavior:
📱 < 992px → Columns stack vertically
🖥️ ≥ 992px → Columns become 3 equal parts
📌 Two-Column Layout
✔ Perfect for desktop split-screen layouts.
📌 Mixed Layout Example
✔ Frequently used in blog and dashboard layouts.
📌 Fully Responsive Example (XS → MD → LG)
Behavior:
| Screen Size | Layout |
|---|---|
| Extra Small (≤576px) | Stacked |
| Medium (≥768px) | 2 columns |
| Large (≥992px) | 3 columns |
📌 Summary Table
| Breakpoint Class | Screen Size | Layout Behavior |
|---|---|---|
.col-lg-* |
≥ 992px | Horizontal layout (desktop optimized) |
Below .col-lg-* |
< 992px | Converts to smaller breakpoint layout or stacked |
🎯 When to Use col-lg-*?
Use col-lg-* when designing:
✔ Desktop-first websites
✔ Admin dashboards
✔ Business or corporate layouts
✔ Wide-content pages (news, blogs, product listings)
