Bootstrap Grid - Small Devices
Bootstrap Grid Example: Small Devices
Assume we have a simple layout with two columns. We want the columns to be
split 25%/75% for small devices.
Tip: Small devices are defined as having a screen width from
768 pixels to 991 pixels.
For small devices we will use the .col-sm-* classes.
We will add the following classes to our two columns:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Now Bootstrap is going to say "at the small size, look for classes with
-sm- in them and use those".
The following example will result in a 25%/75% split on small devices:
Example
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3" style="background-color:lavender;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor
incididunt ut labore et dolore
magna aliqua.</p>
<p>Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
</div>
<div class="col-sm-9" style="background-color:lavenderblush;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium
doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
 |
Note: Make sure that the sum always adds up to 12. |
The next chapter shows how to add a different split percent for medium devices.
Color Picker
