S4 Grid Large
Large Grid Example
| Â | Extra small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|---|
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
We provided a grid example with classes for small and medium devices in the previous chapter. For small devices, we used two divisions (columns) and divided the data into 25%/75% and 50%/50%, respectively:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
But a 33%/66% split could work well on larger devices.
A gadget is considered large if its screen width is between 992 and 1199 pixels.
The .col-lg-* classes will be utilized for large devices:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
At this point, Bootstrap will advise using classes that have -sm-in them when working with small sizes. Examine and use classes that have -md- in them at the medium size. Examine classes that have the word “-lg- in them at the large size and use those.”
For small devices, the split will be 25%/75%, for medium devices, it will be 50%/50%, and for big and xlarge devices, it will be 33%/66%. 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">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Note: You do not have to use all 12 of the available columns; just make sure the total comes up to 12 or less.
Using Only Large
The .col-lg-6 class is the only one specified in the example below; .col-md-* and/or .col-sm-* are not present. This implies a 50%/50% distribution between large and xlarge devices. Nevertheless, it will stack vertically (100% width) for medium, tiny, AND extra small devices:
Example
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Auto Layout Columns
One simple method to make columns with the same width on all devices using Bootstrap 4 is to take the number out of .col-lg-* and use the .col-lg class just on the designated number of col elements. Bootstrap will determine the number of columns and set the width of each column to match.
Collapsed screen size less than 992 pixels will result in the columns stacking horizontally:
<!-- Two columns: 50% width on large and up-->
<div class="row">
<div class="col-lg">1 of 2</div>
<div class="col-lg">2 of 2</div>
</div>
<!-- Four columns: 25% width on large and up -->
<div class="row">
<div class="col-lg">1 of 4</div>
<div class="col-lg">2 of 4</div>
<div class="col-lg">3 of 4</div>
<div class="col-lg">4 of 4</div>
</div>
