Bootstrap 5 Grid XXL

XXL Grid Example

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

Using Only XXL

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

Auto Layout Columns

In Bootstrap 5, there is an easy way to create equal width columns for all devices: just remove the number from .col-xxl-* and only use the .col-xxl 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 1400px, the columns will stack horizontally: