• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Grid Large

← Previous Next →

What is Bootstrap 4 Grid Large?

The Bootstrap 4 Grid Large system is designed for large devices, typically screens 992px and wider, including laptops and desktops. Large grids allow for more complex horizontal layouts, making it easier to distribute content effectively across wide screens.

With Bootstrap 4’s mobile-first approach, large grid classes override smaller breakpoints to ensure layouts are optimized for wider screens without affecting responsiveness on tablets or smartphones.

Large Device Classes

For large devices, Bootstrap 4 provides the .col-lg- classes. Columns using these classes follow the 12-column grid system and adjust automatically based on the row’s width.

Example:

<div class="container">
  <div class="row">
    <div class="col-lg-4 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-lg-4 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-lg-4 bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • On large devices, columns display horizontally side by side.

  • On smaller screens, columns stack vertically automatically.

  • Padding .p-3 and margin .mb-2 provide proper spacing.

Combining Large with Other Breakpoints

Large grids can be combined with smaller breakpoints for fully responsive layouts.

Example:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-warning text-white p-3 mb-2">Column 3</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-danger text-white p-3 mb-2">Column 4</div>
  </div>
</div>

  • .col-12 ensures full width on extra-small screens.

  • .col-sm-6 shows two columns per row on small devices.

  • .col-md-4 shows three columns per row on medium devices.

  • .col-lg-3 displays four columns per row on large devices.

Nesting Columns in Large Grids

You can nest columns inside larger columns for complex layouts on wide screens.

Example:

<div class="container">
  <div class="row">
    <div class="col-lg-8 bg-primary text-white p-3">
      Main Column
      <div class="row mt-2">
        <div class="col-lg-6 bg-warning p-2">Nested 1</div>
        <div class="col-lg-6 bg-danger p-2">Nested 2</div>
      </div>
    </div>
    <div class="col-lg-4 bg-success text-white p-3">Sidebar</div>
  </div>
</div>

  • The main column spans two-thirds and the sidebar one-third on large devices.

  • Nested columns divide the main column into halves, maintaining layout integrity.

Offsets and Ordering in Large Grids

Offsets and ordering help position columns efficiently:

<div class="container">
  <div class="row">
    <div class="col-lg-6 offset-lg-3 bg-primary text-white p-3">Centered Column</div>
  </div>
</div>

  • .offset-lg-3 moves the column three units to the right.

Column ordering example:

<div class="row">
  <div class="col-lg-6 order-lg-2 bg-success p-3">Second Column</div>
  <div class="col-lg-6 order-lg-1 bg-primary p-3">First Column</div>
</div>

  • Columns reorder visually on large devices without changing HTML structure.

Stacked and Horizontal Layouts on Large Devices

Columns can stack or display horizontally depending on screen width:

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-4 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-12 col-lg-4 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-12 col-lg-4 bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • Extra-small to medium devices: columns stack vertically.

  • Large devices and above: columns display horizontally side by side.

This approach ensures responsive, consistent, and visually appealing layouts.

Flexbox Alignment in Large Grids

Bootstrap 4’s Flexbox utilities allow easy alignment:

  • .justify-content-center → horizontal centering

  • .align-items-center → vertical centering

Example:

<div class="container" style="height:200px;">
  <div class="row justify-content-center align-items-center">
    <div class="col-lg-6 bg-primary text-white p-3">Centered Column</div>
  </div>
</div>

  • Columns are centered horizontally and vertically on large devices and larger.

  • Flexbox reduces the need for extra CSS.

Best Practices for Large Grids

  1. Use .col-lg- classes to optimize layouts for large screens.

  2. Combine with .col-, .col-sm-, and .col-md- for fully responsive design.

  3. Nest columns for complex layouts on wide screens.

  4. Apply offsets to center content or create spacing.

  5. Test layouts on desktops and large laptops.

  6. Use consistent padding and margin utilities to maintain spacing.

Summary of the Tutorial

This tutorial explained the Bootstrap 4 Grid Large system, focusing on layouts for screens ≥992px. You learned how to use .col-lg- classes, combine them with smaller breakpoints, nest columns, apply offsets and ordering, and use Flexbox utilities. Mastering large grids ensures your website is desktop-friendly, responsive, and visually consistent, enhancing user experience on wide screens.

Practice Questions

  1. Create a row with three equal columns using .col-lg-4 to display horizontally on large devices.

  2. Make a two-column layout that stacks on medium devices but displays side by side on large screens using .col-12 col-lg-6.

  3. Nest two smaller columns inside a larger column using .col-lg-8 for the parent and .col-lg-6 for nested columns.

  4. Center a column using .col-lg-6 offset-lg-3 on large devices.

  5. Create a row with four columns stacked on medium devices but four per row on large devices using .col-12 col-lg-3.

  6. Combine large and extra-large breakpoints to show four columns per row on large devices and five per row on extra-large devices.

  7. Use Flexbox utilities .justify-content-center and .align-items-center to center a column horizontally and vertically on large screens.

  8. Apply background colors to each column to visually verify alignment and spacing.

  9. Build a row where three columns stack on medium devices but display horizontally on large screens using .col-12 col-lg-4.

  10. Add padding .p-3 and margin .mb-2 to all columns to maintain consistent spacing on large devices.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top