Bootstrap 4 Grid – Extra Large (xl)

Welcome to The Coding College! In this tutorial, we’ll cover the extra-large grid (xl) in Bootstrap 4, designed specifically for devices with a screen width of 1200px or larger, such as widescreen monitors or high-resolution desktops.

What is the Extra-Large Grid (xl)?

The extra-large grid (xl) is part of Bootstrap 4’s responsive grid system, designed to optimize layouts for very large screens. It allows developers to define layouts that look stunning on devices with a minimum width of 1200px, while still adapting to smaller breakpoints.

Key Features:

  1. Breakpoint Activation: Targets screens 1200px or larger.
  2. Optimized for Large Displays: Ideal for widescreen monitors and large desktops.
  3. Responsive Scaling: Automatically adjusts for smaller screen sizes using other breakpoints (lg, md, sm, xs).

Grid Class Syntax

To use the extra-large grid breakpoint, use the col-xl-* class:

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

Here:

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

Example 1: Two Equal Columns for Extra-Large Screens

Here’s an example of creating two equal-width columns for extra-large screens:

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

Behavior:

  • Extra-large screens (≥1200px): Columns align horizontally, each taking 50% of the row width.
  • Smaller screens (<1200px): Columns stack vertically unless specified with other breakpoints.

Example 2: Custom Column Sizes for Extra-Large Screens

You can create custom column widths for extra-large screens:

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

Behavior:

  • Extra-large screens (≥1200px): Column 1 occupies 4/12 of the row width, and Column 2 occupies 8/12.
  • Smaller screens (<1200px): Both columns stack vertically unless overridden by smaller breakpoints.

Example 3: Three Equal Columns for Extra-Large Screens

Here’s how to create three equal-width columns for extra-large screens:

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

Behavior:

  • Extra-large screens (≥1200px): Columns align horizontally, each occupying 1/3 of the row width.
  • Smaller screens (<1200px): Columns stack vertically unless defined with smaller breakpoints.

Example 4: Combining Breakpoints

By combining xl with other breakpoints, you can create a responsive layout for various devices:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4">Column 1</div>
    <div class="col-12 col-md-6 col-xl-4">Column 2</div>
    <div class="col-12 col-md-12 col-xl-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.
  • Extra-large screens (≥1200px): All three columns align horizontally with equal widths (col-xl-4).

Example 5: Nested Grids for Extra-Large Screens

You can create more complex layouts by nesting grids inside extra-large columns:

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

Example 6: Full-Width Layout with container-fluid

To span the full viewport width for extra-large screens, use the container-fluid class:

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

Practical Use Case: Product Grid Layout for Extra-Large Screens

Let’s create a responsive product grid layout using the extra-large grid system:

<div class="container">
  <div class="row">
    <div class="col-xl-3">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Product Image">
        <div class="card-body">
          <h5 class="card-title">Product 1</h5>
          <p class="card-text">$100</p>
        </div>
      </div>
    </div>
    <div class="col-xl-3">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Product Image">
        <div class="card-body">
          <h5 class="card-title">Product 2</h5>
          <p class="card-text">$120</p>
        </div>
      </div>
    </div>
    <div class="col-xl-3">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Product Image">
        <div class="card-body">
          <h5 class="card-title">Product 3</h5>
          <p class="card-text">$150</p>
        </div>
      </div>
    </div>
    <div class="col-xl-3">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Product Image">
        <div class="card-body">
          <h5 class="card-title">Product 4</h5>
          <p class="card-text">$200</p>
        </div>
      </div>
    </div>
  </div>
</div>

Tips for Using the Extra-Large Grid (xl)

  1. Design for High-Resolution Screens: Use xl to optimize layouts for widescreen monitors and high-resolution desktops.
  2. Combine Breakpoints: Use xl alongside lg, md, sm, and xs for maximum flexibility.
  3. Test on Multiple Devices: Ensure your layouts look great on all devices by testing on both small and large screens.
  4. Use Utilities: Combine the grid with Bootstrap’s alignment (align-items-*, justify-content-*) and spacing utilities (m-*, p-*) for better control over layout and design.

Conclusion

The extra-large grid (xl) in Bootstrap 4 is essential for creating layouts tailored to large desktop screens and widescreen monitors. By leveraging the flexibility of the grid system, you can design professional, responsive websites that adapt to any screen size.

Leave a Comment