BS5 Grid Small
Small 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 |
Let’s say we have a straightforward two-column layout. For small devices, we want the columns to be divided into 25% and 75%.
A gadget is considered small if its screen width is between 576 and 767 pixels.
We shall utilize the .col-sm-* classes for tiny devices.
The classes listed below will be added to our two columns:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
A 25%/75% split will occur on small, medium, big, xlarge, and xxlarge devices based on the following example. On exceptionally tiny devices, it will stack automatically (100%):
.col-sm-3
.col-sm-9
Example
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 bg-warning">
<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.
You would use .col-sm-4 and .col-sm-8 for a 33.3%/66.6% split (and .col-sm-6 and .col-sm-6) for a 50%/50% split:
.col-sm-4
.col-sm-8
.col-sm-6
.col-sm-6
Example
<!-- 33.3/66.6% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Auto Layout Columns
One simple method to achieve equal width columns on all devices using Bootstrap 4 is to remove the number from .col-sm-* and use the .col-sm class solely on a predetermined number of col elements. Bootstrap will determine the number of columns and set the width of each column to match.
Less than 576px on the screen will cause the columns to stack horizontally:
<!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3 of 4</div>
<div class="col-sm">4 of 4</div>
</div>
