Bootstrap 4 Grid – Large (lg)

Welcome to The Coding College! In this tutorial, we’ll explore the large grid (lg) system in Bootstrap 4, which is optimized for designing layouts for devices with a minimum screen width of 992px or larger, such as desktops and large tablets.

What is the Large Grid (lg)?

The large grid (lg) is one of Bootstrap 4’s responsive grid breakpoints, designed to handle larger screens. It provides developers with the flexibility to create layouts tailored for devices 992px and above.

Key Features:

  1. Breakpoint Activation: Applies to devices with a screen width of 992px or more.
  2. Responsive Design: Automatically adjusts for smaller breakpoints (md, sm, xs) or larger (xl).
  3. Flexible Layouts: Allows you to define column structures specific to large screens while maintaining adaptability for other sizes.

Grid Class Syntax

To use the large grid breakpoint, apply the col-lg-* class in your layout:

<div class="row">
  <div class="col-lg-*">Column Content</div>
</div>

Here:

  • Replace * with a number between 1 and 12 to define the column width for large screens.

Example 1: Two Equal Columns for Large Screens

Here’s how to create a layout with two equal-width columns for large screens:

<div class="container">
  <div class="row">
    <div class="col-lg-6">Column 1</div>
    <div class="col-lg-6">Column 2</div>
  </div>
</div>

Behavior:

  • Large screens (≥992px): Columns are displayed side by side, each occupying 50% of the row.
  • Smaller screens (<992px): Columns stack vertically and take full width.

Example 2: Custom Column Sizes

You can create custom column widths for large screens using col-lg-*:

<div class="container">
  <div class="row">
    <div class="col-lg-4">Column 1 (4/12)</div>
    <div class="col-lg-8">Column 2 (8/12)</div>
  </div>
</div>

Behavior:

  • Large screens (≥992px):
    • Column 1 occupies 4/12 of the row width.
    • Column 2 occupies 8/12 of the row width.
  • Smaller screens (<992px): Both columns stack vertically and take full width.

Example 3: Three Equal Columns for Large Screens

To create three equal-width columns for large screens, use the col-lg-4 class:

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

Behavior:

  • Large screens (≥992px): Columns align horizontally, each taking 1/3 of the row width.
  • Smaller screens (<992px): Columns stack vertically.

Example 4: Mixing Breakpoints for Large Screens

You can combine lg with other breakpoints (md, sm) to create more adaptive layouts:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Column 1</div>
    <div class="col-12 col-md-6 col-lg-4">Column 2</div>
    <div class="col-12 col-md-12 col-lg-4">Column 3</div>
  </div>
</div>

Behavior:

  • Extra small screens (<576px): All columns stack vertically (col-12).
  • Medium screens (≥768px): Columns 1 and 2 align side by side (col-md-6), while Column 3 stacks below.
  • Large screens (≥992px): All three columns align horizontally with equal widths (col-lg-4).

Example 5: Nested Grids for Large Screens

Here’s an example of how to use nested grids within a large grid:

<div class="container">
  <div class="row">
    <div class="col-lg-8">
      Parent Column
      <div class="row">
        <div class="col-lg-6">Nested Column 1</div>
        <div class="col-lg-6">Nested Column 2</div>
      </div>
    </div>
    <div class="col-lg-4">Parent Column 2</div>
  </div>
</div>

Example 6: Full-Width Layout with container-fluid

To create a full-width layout for large screens, use the container-fluid class:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">Column 1</div>
    <div class="col-lg-6">Column 2</div>
  </div>
</div>

Practical Use Case: Card Layout for Large Screens

Here’s an example of a responsive card layout using the large grid system:

<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Tips for Using the Large Grid (lg)

  1. Mobile-First Design: Start with smaller breakpoints (xs, sm, md) and scale up to lg for larger screens.
  2. Test Responsiveness: Always test your layouts on a variety of devices to ensure a seamless user experience.
  3. Combine Breakpoints: Use lg with other breakpoints to create highly flexible and adaptable layouts.
  4. Use Alignment Utilities: Pair the grid with utilities like align-items-* and justify-content-* for better control over element alignment.

Conclusion

The large grid (lg) in Bootstrap 4 is essential for building responsive layouts optimized for desktops and large tablets. By combining lg with other breakpoints and utilities, you can create flexible, professional designs that look great on any device.

Leave a Comment