Lesson 42: Large Grid in Bootstrap 5

The previous Bootstrap lesson introduced you to examples of grid systems with classes for small and medium-sized devices. For example, using two divs (columns) and dividing them proportionally at 25%/75% on small devices and 50%/50% on medium-sized devices:

. .

However, on larger devices, the design can be better when split at a 33%/66% ratio. Devices are considered large when the screen width is 992 pixels to 1199 pixels or more.

For larger devices, we will use the class .col-lg-*:

. .

In Bootstrap, for small devices, you'll use the class with -sm- , for medium-sized devices with -md- , and for large devices, -lg- will be used in the class.

The example below will show a split-screen ratio of 25%/75% on small devices, 50%/50% on medium devices, and 33%/66% on large, extra-large, and very large devices:

 Bootstrap Example 

Large Grid

Adjust the size of your browser window to see the change.

English example text

For Large Devices Only

In the example below, we only use the class .col-lg-6(without .col-md-*and .col-sm-*). This means that large, very large, and extra-large devices will be split 50%/50%. However, on medium, small, and extra-small devices, it will stack vertically at 100% width.

For example:

 Bootstrap Example 

Resize your browser window to see the change.

English example text

Automatic Column Layout

Bootstrap 5 provides an easy way to create columns with the same width across all devices. Essentially, you just remove the number in the `col` element .col-lg-*and use only the class .col-lg on the specific number of columns. Bootstrap will determine the number of columns present, and they will all have the same width.

If the screen size is smaller than 992px, the columns will accumulate horizontally:

 Bootstrap Example 

Automatic Responsive Layout Column

 1 of 2 2 of 2 
 1 of 4 2 of 4 3 of 4 4 of 4 

You do the same as above with the classes for widescreen and ultrawide displays.

Above are some illustrative examples of large grid systems for large screens. Hopefully, this article is helpful to you.