Understanding Bootstrap Grid System for Large Devices (col-lg-*)
Introduction
Responsive design is essential in modern web development. Whether you’re building a landing page, dashboard, or blog, your layout must look great on all devices. That’s where Bootstrap’s grid system comes in.
In this article, we’ll focus on how to use Bootstrap’s large device grid system using the col-lg-* classes — ideal for desktops and widescreen laptops (≥992px).
Bootstrap Grid: Quick Recap
Bootstrap’s grid is based on a 12-column layout. You can control how many columns each element occupies at different screen sizes using classes like:
| Breakpoint | Prefix | Min Width |
|---|---|---|
| Extra Small | col- |
<576px |
| Small | col-sm- |
≥576px |
| Medium | col-md- |
≥768px |
| Large | col-lg- |
≥992px |
| Extra Large | col-xl- |
≥1200px |
Example: Basic col-lg-* Layout
✅ What Happens:
-
On large screens (≥992px): Two columns appear side-by-side, each taking up 6 out of 12 columns (50% width).
-
On smaller screens (<992px): The columns stack vertically.
3-Column Grid Example (for Large Devices)
Each column takes 4 out of 12 units. This layout shows 3 equal columns side-by-side on desktops but stacks them on tablets and phones.
Why Use col-lg-*?
-
Best for desktop-first layouts.
-
Gives you more control at wider resolutions.
-
Ensures optimal spacing, alignment, and content hierarchy on larger screens.
Real Use Case: Cards in Grid on Large Screens
This layout shows 4 cards in one row on desktops and stacks them as the screen size decreases.
Combine with Other Breakpoints
You can use multiple breakpoints for fine control:
Conclusion
The col-lg-* classes in Bootstrap are essential when you want full control over your layout on large screens. By using these classes wisely, you can create polished, desktop-optimized designs without writing a single media query.
Build smart, responsive, and professional web layouts with Bootstrap’s grid — and your users will thank you for it.
