main_leaderboard, all: [728,90][970,90][320,50][468,60]

Bootstrap 4 Grid - Extra Large

XLarge Grid Example

In the previous chapter, we presented a grid example with classes for small
and medium devices. We used two divs (columns) and we gave them
a
25%/75% split on small devices, and a 50%/50% split on medium devices and a
33%/66% split on large devices:

But on xlarge devices the design may be better as a 20%/80% split.

For xlarge devices we will use the .col-xl-* classes:

The following example will result in a 25%/75% split on small devices, a
50%/50% split on medium devices, and a 33%/66% split on large and a 20%/80%
split on xlarge
devices. On extra small devices, it will automatically stack (100%):

Using Only XLarge

In the example below, we only specify the .col-xl-6 class (without .col-lg-*, .col-md-* and/or .col-sm-*).
This means that xlarge devices will split 50%/50%. However,
for large, medium, small AND extra small devices, it will stack vertically (100% width):

Auto Layout Columns

In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-xl-* and only use the .col-xl class on a specified number of
col elements. Bootstrap will recognize how many columns there
are, and each column will get the same width.

If the screen size is less than 1200px, the columns will
stack horizontally: