BS Grid/Small
Bootstrap Grid Example: Small Devices
---- SCROLL MUKAVU ----
Assume our layout is simple, with two columns. We want the columns to be split 25%/75% for small devices.
Tip: Small devices have screens ranging in width from 768 to 991 pixels.
For small devices, we shall utilize the .col-sm-* class.
We will include the following classes in our two columns:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Now Bootstrap will say, “At small sizes, look for classes with -sm- in them and use those.”
The following example yields a 25%/75% split for small (medium, and big) devices. On extra tiny smartphones, it will automatically stack (100%).
---- IMAGE MUKAVU ----
Example
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Note: Make sure that the sum always equals 12.
For a 33.3%/66.6% split, you would use .col-sm-4 and .col-sm-8.
---- IMAGE MUKAVU ----
Example
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
The following chapter demonstrates how to set a different split percentage for medium devices.
