How to Use Bootstrap XL Grids in Your Layouts

In the previous chapters, we have discussed Bootstrap utility classes used for sizing. It's time now to complete this series of tutorials with the Bootstrap XL grid class.

Bootstrap XL grid classes are used when the width of the screen is more than 1200 pixels. It's a lot compared to the classes we covered before - and yet, it's not that much in the standards of modern devices.

We will now get to explaining how and when to use Bootstrap XL grid classes on their own or combine with others. You will also get a chance to remember how to create auto Bootstrap layouts.

Bootstrap XL: Main Tips

• Responsive classes are used to specify on what screens a certain Bootstrap layout works.
• The extra large class applies a grid column class to an element when the screen is wider than 1200px. This limit is called the Bootstrap 4 XL breakpoint.
• To use the in your layout, you must include Bootstrap col-xl-* in your code.

Using Extra Large Classes

Bootstrap XL grid column classes apply when the screen is wider than 1200px. If it is smaller, the layout will collapse, and the columns will be displayed stacked.

However, you can use XL grid on Bootstrap combined with other responsive sizing classes. In such case, the layout would reaarange as it reaches certain Bootstrap breakpoints:

See the code example to see how columns like the ones above are created:

<div class="container">
  <div class="row">
    <div class="bg-info col-md-8 col-sm-4 col-lg-6 col-xl-1">
      ...
    </div>
    <div class="bg-primary col-md-4 col-sm-8 col-lg-6 col-xl-11">
      ...
    </div>
  </div>
</div>

You will notice we combined multiple responsive grid column classes: col-sm-*, col-md-*, col-lg-*, and col-xl-*. Let's see how this would work at different Bootstrap breakpoints:

• If the screen is narrower than 1200px (large), the columns will rearrange slightly.
• If it's narrower than 991px (medium), the layout will rearrange again.
• If it's narrower than 768px (small), the layout will rearrange once more.
• If it's narrower than 576px (extra small), the layout collapses and columns appear stacked.

To see how the XL grid on Bootstrap can be used on its own, see the example below. You will notice two sizing classes (both extra large) are applied for the Bootstrap columns: col-xl-1 for the left one, and col-xl-11 for the right one:

<div class="container">
  <div class="row">
    <div class="bg-info col-xl-1">
      ...
    </div>
    <div class="bg-primary col-xl-11">
      ...
    </div>
  </div>
</div>

Creating Auto Layout

If you don't define the width your grid columns should span through, they will automatically be made equal and take up all available width when combined. This is called an auto Bootstrap layout:

<div class="row">
<!-- Five 20% wide columns --> 
  <div class="bg-primary col-xl">1</div>
  <div class="bg-secondary col-xl">2</div>
  <div class="bg-primary col-xl">3</div>
  <div class="bg-secondary col-xl">4</div>
  <div class="bg-primary col-xl">5</div>
</div>

Bootstrap XL: Summary

• Using the responsive classes, you can specify one of five possible screen sizes a particular Bootstrap layout will work on.
• The Bootstrap 4 XL breakpoint is 1200 pixels in screen width.
• By adding Bootstrap col-xl-* to your script, you apply the extra large grid classes.