Bootstrap Grid Large (.col-lg-*)

The Large (lg) grid classes in Bootstrap are designed to trigger specifically when the screen is a minimum of 992px wide. This breakpoint is traditionally aimed at standard desktop monitors and standard-sized laptops.

How .col-lg-* Works

When you use the .col-lg-* class, you are instructing Bootstrap to vertically stack your columns on phones (Extra Small), portrait tablets (Small), and even landscape iPads (Medium). The layout will only break into a horizontal grid when the screen gives you enough room on a desktop.

Example 1: Four Equal Columns (25%)

A classic use case for the large breakpoint is a 4-column feature section or product showcase. Using four .col-lg-3 columns side-by-side on a phone would squash the content too much. By reserving this split for lg, the items stay beautifully stacked until a desktop is used.

<div class="container">
    <div class="row">
        <div class="col-lg-3">Feature 1</div>
        <div class="col-lg-3">Feature 2</div>
        <div class="col-lg-3">Feature 3</div>
        <div class="col-lg-3">Feature 4</div>
    </div>
</div>

Example 2: Two Equal Columns (50%)

You can split the layout exactly down the middle for desktop screens using .col-lg-6. This is excellent for placing text on the left and a large image on the right.

<div class="container">
    <div class="row">
        <div class="col-lg-6">Text Content</div>
        <div class="col-lg-6">Image Content</div>
    </div>
</div>

Nesting Columns in Desktop Grids

Because desktops have so much space, you will frequently want to Nest columns inside of other columns. To do this, simply add a new .row inside an existing .col-* container.

<div class="container">
    <div class="row">
        <!-- Outer Column -->
        <div class="col-lg-8">
            Main Desktop Area
            
            <!-- Nested Row -->
            <div class="row">
                <div class="col-lg-6">Inner Left</div>
                <div class="col-lg-6">Inner Right</div>
            </div>

        </div>
    </div>
</div>

Summary Table for .col-lg-*

Observe how the 'large' grid class remains 100% wide for the majority of devices, only going horizontal for monitors.