BS Grid/Medium
Bootstrap Grid Example: Medium Devices
---- SCROLL MUKAVU ----
In the last chapter, we demonstrated a grid with classes for small devices. We employed two divisions (columns) and gave them a 25%/75% split.
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
However, for medium-sized devices, a 50-50 split may be preferable.
Tip: Medium smartphones have screen widths ranging from 992 to 1199 pixels.
The .col-md-* classes will be used on medium devices.
We will now add the column widths for medium devices.
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Now Bootstrap will say, “At tiny sizes, check for classes with -sm- in them and utilize those. At medium size, check for classes with -md- in them and utilize them.”
The example below yields a 25%/75% split on small devices and a 50%/50% split on medium (and big) devices. On extra tiny smartphones, it will automatically stack (100%).
Example
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Note: Make sure that the sum always equals 12.
Using Only Medium
In the example below, we simply specify the .col-md-6 class (not .col-sm-*). This means that medium and big devices will be split 50/50 as the class scales. However, small devices will stack vertically (100% width):
Example
<div class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
The following chapter demonstrates how to implement a varied split percentage for large devices.
