BS4 Grid Medium
Medium 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 devices in the previous chapter. We divided the two divs (columns) into 25% and 75%:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
That being said, a 50%/50% split might work better on medium-sized devices.
A gadget is considered medium if its screen width falls between 768 and 991 pixels.
The .col-md-* classes will be utilized for medium-sized devices:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</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.”
On small devices, the following example will yield a 25%/75% split, and on medium (and big and xlarge) devices, a 50%/50% split. 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">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6">
<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 Medium
We simply define the.col-md-6 class (not the .col-sm-*) in the example below. Because the class increases up, this implies that medium, big, and extra large devices will split 50%/50%. On the other hand, it will stack vertically (100% width) for tiny and extra small devices:
Example
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
Auto Layout Columns
One simple method to achieve identical width columns on all devices using Bootstrap 4 is to remove the number from .col-md-* and limit the use of the .col-md class to a predetermined amount of col elements. Bootstrap will determine the number of columns and set the width of each column to match.
Less than 768 pixels on the screen will cause the columns to stack horizontally:
<!-- Two columns: 50% width on medium and up-->
<div class="row">
<div class="col-md">1 of 2</div>
<div class="col-md">2 of 2</div>
</div>
<!-- Four columns: 25% width on medium and up -->
<div class="row">
<div class="col-md">1 of 4</div>
<div class="col-md">2 of 4</div>
<div class="col-md">3 of 4</div>
<div class="col-md">4 of 4</div>
</div>
