When and How to Use Bootstrap Large Grid Classes

Whenever you're publishing a web site or application, you want to make it accessible to your audience. It will all be in vain if they see it displayed incorrectly. One of the ways to avoid this is by using Bootstrap 4 responsive classes that make a website adapt to any screen size.

As we covered Bootstrap utility classes, we told you there are five classes to use for sizing Bootstrap layouts: extra small, small, medium, large and extra large. In this tutorial, we will show you how to use the Bootstrap large grid class in your work and combine it with other classes for more flexibility.

Large Grid: Main Tips

• Bootstrap 4 grid system offers a set of responsive classes to specify on what screens a certain layout works.
• The large class applies a grid column class to an element when the screen is wider than 991px.
• Col-LG classes may be used on their own or with other sizing classes.

Applying the Class

The Bootstrap col-lg grid column classes apply when the screen is wider than 991px and collapses when it isn't. The prefix .col-lg-* is used to create columns that look like the ones you see below:

See the code example provided below. You will notice we combined three responsive grid column classes in it: col-sm-*, col-md-*, and col-lg-*. This means that if the screen or window is narrower than 991px (medium), the columns will rearrange slightly. If it is small (less 768px wide), the layout will rearrange again.

In case of an extra small screen (less than 576px wide), the layout collapses and appears stacked:

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

Of course, Bootstrap col-lg-* can be used on its own as well. See an example below to see how it's done:

<div class="container">
  <div class="row">
    <div class="bg-info col-lg-6">
      ...
    </div>
    <div class="bg-primary col-lg-6">
      ...
    </div>
  </div>
</div>

Auto Layouts

An auto layout is created by not specifying the width of a Bootstrap grid column. All you have to do is skip the numbers for all column containers inside a row container. All columns will then become of the same width and together occupy the whole width:

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

When you're using Bootstrap LG or any other sizing classes, keep in mind that your grid cannot exceed twelve columns in total width. For example, if you type col-lg-12 in your code, your grid will only have one column that spans through all available width.

Large Grid: Summary

• The Bootstrap Col-LG responsive classes are applied in cases of a screen wider than 991px.
• These classes can be used alone or combined with additional sizing classes other than col lg.