Bootstrap Grid – Large Devices

22 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Grid for Large Devices

In this Bootstrap tutorial, you’ll learn how to use Bootstrap 5’s Grid System to create responsive layouts optimized for large devices (e.g., desktops ≥992px) using col-lg-* classes. We’ll pair grids with images for a vibrant look.

What You’ll Learn

Creating a basic large-device grid
Using col-lg-* for responsive layouts
Mixing large and other breakpoints
Combining grids with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Grid for Large Devices

Bootstrap’s Grid System uses a 12-column layout with responsive classes. The col-lg-* class targets large devices (≥992px, e.g., desktops). Columns with col-lg-* stack vertically on smaller screens (<992px) and align horizontally on large screens and above, ensuring desktop-friendly layouts.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Create a Basic Large-Device Grid

Start with a two-column grid that stacks on smaller screens and becomes horizontal on large screens. Use this code:

<div class="container">
    <h3>Basic Large-Device Grid</h3>
    <div class="row">
        <div class="col-lg-6 bg-light p-3">
            <h4>Column 1</h4>
            <p>Stacks on smaller screens, half-width on large (≥992px).</p>
        </div>
        <div class="col-lg-6 bg-secondary text-white p-3">
            <h4>Column 2</h4>
            <p>Horizontal on large devices.</p>
        </div>
    </div>
</div>

Explanation:

container: Centers and constrains content.
row: Creates a horizontal row for columns.
col-lg-6: Each column takes 6 of 12 grid units (half-width) on large screens (≥992px), stacking on smaller screens (<992px).
bg-light, bg-secondary: Light and gray backgrounds for visibility.
p-3: Adds padding to columns.
text-white: White text for contrast on the gray background.

This grid is optimized for large devices, stacking on smaller screens.

Step 3: Use Variable Widths for Large Devices

Create a grid with uneven column widths on large screens. Try this:

<div class="container">
    <h3>Variable Width Grid</h3>
    <div class="row">
        <div class="col-lg-8 bg-primary text-white p-3">
            <h4>Main Content</h4>
            <p>Takes 8 columns on large screens, full width on smaller screens.</p>
        </div>
        <div class="col-lg-4 bg-success text-white p-3">
            <h4>Sidebar</h4>
            <p>Takes 4 columns on large screens.</p>
        </div>
    </div>
</div>

Explanation:

col-lg-8, col-lg-4: Main content takes 8 units, sidebar takes 4 on large screens (≥992px), both stack on smaller screens.
bg-primary, bg-success: Blue and green backgrounds.
text-white: White text for readability.
p-3: Padding for spacing.

This creates an asymmetric layout for large devices.

Step 4: Mix Large and Other Breakpoints

Combine col-*, col-sm-*, col-md-*, and col-lg-* for different behaviors across breakpoints. Add this:

<div class="container">
    <h3>Mixed Breakpoint Grid</h3>
    <div class="row">
        <div class="col-12 col-sm-6 col-md-6 col-lg-4 bg-info text-white p-3">
            <h4>Column 1</h4>
            <p>Full on extra-small, half on small/medium, one-third on large.</p>
        </div>
        <div class="col-12 col-sm-6 col-md-6 col-lg-4 bg-warning p-3">
            <h4>Column 2</h4>
            <p>Adjusts from full to half to one-third width.</p>
        </div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-4 bg-light p-3">
            <h4>Column 3</h4>
            <p>Full on smaller screens, one-third on large.</p>
        </div>
    </div>
</div>

Explanation:

col-12: Full width on extra-small screens (<576px).
col-sm-6: Half width on small screens (≥576px) for the first two columns.
col-sm-12: Full width on small screens for the third column.
col-md-6, col-md-12: Same behavior on medium screens (≥768px).
col-lg-4: One-third width on large screens (≥992px) for all columns.
bg-info, bg-warning, bg-light: Cyan, yellow, and light backgrounds.
text-white: White text where needed.
p-3: Padding for spacing.

This grid adapts across breakpoints, with a focus on large devices.

Step 5: Combine with an Image

Pair a large-device grid with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-12 col-lg-8">
            <h3>Portfolio Grid</h3>
            <p>Showcase your projects.</p>
            <div class="row">
                <div class="col-12 col-lg-6 bg-light p-3">
                    <h4>Project 1</h4>
                    <p>A web development project.</p>
                </div>
                <div class="col-12 col-lg-6 bg-secondary text-white p-3">
                    <h4>Project 2</h4>
                    <p>A design project.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

Outer row and col-12 col-lg-8, col-12 col-lg-4: Grid takes 8 units, image takes 4 on large screens, both stack on smaller screens.
Nested row with col-12 col-lg-6: Two columns (full width on smaller screens, half on large).
bg-light, bg-secondary: Light and gray backgrounds for projects.
Uses a 200×150 green image for vibrancy.
img-fluid rounded: Responsive image with rounded corners.

The image enhances the portfolio context.

Final Code

Here’s a combined example with varied large-device grids and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Large-Device Grid</h3>
            <div class="row">
                <div class="col-lg-6 bg-light p-3">
                    <h4>Column A</h4>
                    <p>Half-width on large screens, stacks on smaller screens.</p>
                </div>
                <div class="col-lg-6 bg-dark text-white p-3">
                    <h4>Column B</h4>
                    <p>Horizontal on large devices.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Mixed Breakpoint Grid</h3>
            <div class="row">
                <div class="col-12 col-sm-6 col-md-6 col-lg-4 bg-primary text-white p-3">
                    <h4>Item 1</h4>
                    <p>Full on extra-small, half on small/medium, one-third on large.</p>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-4 bg-success text-white p-3">
                    <h4>Item 2</h4>
                    <p>Responsive across breakpoints.</p>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-4 bg-info text-white p-3">
                    <h4>Item 3</h4>
                    <p>Full on smaller screens, one-third on large.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-7">
            <h3>Gallery Grid</h3>
            <p>Display your images.</p>
            <div class="row">
                <div class="col-12 col-lg-6 bg-light p-3">
                    <h4>Image 1</h4>
                    <p>A landscape photo.</p>
                </div>
                <div class="col-12 col-lg-6 bg-secondary text-white p-3">
                    <h4>Image 2</h4>
                    <p>An urban photo.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A simple two-column grid (stacked on smaller screens, half-width on large) with light and dark backgrounds.
A three-column grid (full/half on extra-small/small/medium, one-third on large) with blue, green, and cyan backgrounds.
A gallery grid (stacked on smaller screens, half-width on large within a larger column) with light and gray backgrounds, beside a red 250×150 image.
All grids are responsive, optimized for large devices (≥992px), with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Grid Docs for more options.
Try col-lg-auto for content-driven widths on large screens.
Combine with col-xl-* for extra-large screen layouts.

Conclusion

You’ve mastered Bootstrap’s Grid for Large Devices! With col-lg-* classes and a 12-column system, plus striking images, you’ve created layouts that stack on smaller screens and align horizontally on large devices. Keep experimenting to enhance your webpages.