Bootstrap 5 – Grid Large (lg) Variants – Desktop Layouts Made Easy

Introduction – What Is the lg Grid in Bootstrap 5?

In Bootstrap 5, the lg breakpoint activates at 992px and up, targeting standard desktop and laptop screens. Using .col-lg-*, .offset-lg-*, and .order-lg-*, you can structure responsive layouts that adapt beautifully on larger viewports while keeping mobile-first design intact.

In this guide, you’ll learn:

• How col-lg-* works in responsive grids
• Use cases for lg variants
• Nesting, offsetting, and reordering content at lg
• Best layout practices for desktop UIs

Bootstrap 5 Grid Breakpoint – lg Overview

The lg variant is often used to create multi-column layouts that appear on desktops while stacking or simplifying the UI on smaller screens.

Example 1 – Two Columns at Large Screens

<div class="row">
  <div class="col-12 col-lg-6 bg-primary text-white p-3">Left</div>
  <div class="col-12 col-lg-6 bg-success text-white p-3">Right</div>
</div>

Explanation:

• 100% width on small and medium screens
• Side-by-side 6-column layout at ≥992px

Example 2 – Grid with Three Columns on lg

<div class="row">
  <div class="col-12 col-lg-4 bg-warning p-3">Column A</div>
  <div class="col-12 col-lg-4 bg-info text-white p-3">Column B</div>
  <div class="col-12 col-lg-4 bg-secondary text-white p-3">Column C</div>
</div>

Output:

• Stacked layout on phones and tablets
• Three equal columns appear on desktops

Example 3 – Offset Columns on Desktop

<div class="row">
  <div class="col-lg-6 offset-lg-3 bg-light p-4 text-center">Centered on Desktop</div>
</div>

Explanation:

• Centered block (6 columns) offset by 3 on both sides
• Applies from lg breakpoint and up

Example 4 – Reordering Content with order-lg-*

<div class="row">
  <div class="col-lg-6 order-lg-2 bg-success text-white p-3">Appears Second on Desktop</div>
  <div class="col-lg-6 order-lg-1 bg-dark text-white p-3">Appears First on Desktop</div>
</div>

Explanation:

• Columns reorder visually on large screens
• Retain natural order on smaller screens

Example 5 – Nested Rows at lg Breakpoint

<div class="row">
  <div class="col-lg-8 bg-light p-3">
    <div class="row">
      <div class="col-6 bg-info text-white p-2">Nested A</div>
      <div class="col-6 bg-warning p-2">Nested B</div>
    </div>
  </div>
  <div class="col-lg-4 bg-secondary text-white p-3">Sidebar</div>
</div>

Explanation:

• Two nested columns within a larger desktop grid
• Ideal for layouts with sidebars, cards, or content panels

Best Practices for lg Grid Variants

Summary – Bootstrap 5 lg Desktop Layouts

The lg variant is essential for full-width desktop layouts in Bootstrap 5. It helps you create clean, multi-column designs that stack gracefully on smaller screens while providing optimal layout on desktops.

Key Takeaways:

• lg applies at ≥992px (laptops, desktops)
• Use .col-lg-* for responsive multi-column structures
• Combine with .order-lg-* and .offset-lg-* for layout control
• Nesting enables flexible sub-structures within larger grids

Ideal for blog layouts, pricing sections, dashboards, sidebars, and content-heavy desktop views.

FAQs – Bootstrap 5 Large Grid (lg) Variants

What screen width does lg start at in Bootstrap 5?
lg starts at 992px and targets laptops and desktops.

Can I skip sm and md and go straight to lg?
Yes. If you only want to change layout on desktops, use only col-lg-*.

Is nesting allowed with lg columns?
Absolutely. Just place a .row inside a .col-lg-*.

What’s the benefit of using offset-lg-*?
It allows centering or pushing columns to align content visually on large screens.

Does lg override md and sm?
Yes. It applies at 992px and above, overriding smaller breakpoints unless they are explicitly defined.