BS5 Grid XXL
XLarge Grid Example
| XSmall | Small | Medium | Large | Extra Large | XXL | |
|---|---|---|---|---|---|---|
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
XXL devices are defined as having a screen width from 1400 pixels and above.
Using the following example, the split will be as follows: 25%/75% for XXL devices and 50%/50% for medium, large, and extra large devices. On tiny and extremely tiny devices, it will stack automatically (100%):
==== Example mukavu ====
Example
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xxl-3">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6 col-xxl-9">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Note: Make sure that the sum always adds up to 12.
Using Only XXL
The following example simply specifies the .col-xxl-6 class; it does not include the .col-md-* or .col-sm-* classes. This implies a 50%/50% split for xxlarge devices. Nevertheless, it will stack vertically (100% width) for extremely big, large, medium, small, AND extra small devices:
Example
<div class="container-fluid">
<div class="row">
<div class="col-xxl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xxl-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Auto Layout Columns
One simple method to achieve identical width columns on all devices using Bootstrap 5 is to remove the number from .col-xxl-* and limit the use of the .col-xxl class to a predetermined amount of col elements. Bootstrap will determine the number of columns and set the width of each column to match.
The columns will stack horizontally if the screen resolution is smaller than 1400 pixels:
<!-- Two columns: 50% width on xxl and up-->
<div class="row">
<div class="col-xxl">1 of 2</div>
<div class="col-xxl">2 of 2</div>
</div>
<!-- Four columns: 25% width on xxl and up -->
<div class="row">
<div class="col-xxl">1 of 4</div>
<div class="col-xxl">2 of 4</div>
<div class="col-xxl">3 of 4</div>
<div class="col-xxl">4 of 4</div>
</div>
