BS5 Grid XLarge
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 |
We provided a grid example with classes for small and medium devices in the previous chapter. A 25%/75% split was applied to small devices, a 50%/50% split to medium devices, and a 33%/66% split to large devices using two divisions (columns):
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
However, a 20%/80% split may work better on xlarge devices.
Devices classified as extra large must have a screen width of at least 1200 pixels.
We shall use the .col-xl-* classes for xlarge devices:
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
For small devices, the split will be 25%/75%; for medium devices, it will be 50%/50%; for big devices, it will be 33%/66%; and for xlarge devices, it will be 20%/80%. On exceptionally tiny devices, it will stack automatically (100%):
==== Example mukavu ====
Example
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Note: Ensure that the total always equals 12.
Using Only XLarge
The .col-xl-6 class is the only one specified in the example below; .col-lg-*, .col-md-*, and/or .col-sm-* are not present. Thus, xlarge devices will be divided 50/50. It will stack vertically (100% width) for large, medium, tiny, and extra small devices, though:
Example
<div class="container-fluid">
<div class="row">
<div class="col-xl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xl-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Auto Layout Columns
Using the .col-xl class on a limited number of col elements and removing the number from .col-xl-* is a simple method for creating equal width columns for all devices using Bootstrap 4. 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 1200 pixels:
<!-- Two columns: 50% width on xlarge and up-->
<div class="row">
<div class="col-xl">1 of 2</div>
<div class="col-xl">2 of 2</div>
</div>
<!-- Four columns: 25% width on xlarge and up -->
<div class="row">
<div class="col-xl">1 of 4</div>
<div class="col-xl">2 of 4</div>
<div class="col-xl">3 of 4</div>
<div class="col-xl">4 of 4</div>
</div>
