BS Grid/Large
Bootstrap Grid Example: Large Devices
---- SCROLL MUKAVU ----
In the last chapter, we demonstrated a grid with classes for small and medium devices. We used two divs (columns), with a 25%/75% split on small devices and a 50%/50% split on medium devices.
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
However, on large devices, a 33%/66% split may be more appropriate.
Tip: Large devices have a screen width of 1200 pixels or more.
For large devices, we shall utilize the .col-lg-* classes.
So now we’ll include the column widths for huge devices.
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
Now Bootstrap will say, “At tiny sizes, check for classes with -sm- in them and utilize those. At medium size, seek for classes that end in -md- and use them. At the large size, seek for classes that contain the word -lg- and use them.”
The following example yields a 25%/75% split on small devices, 50%/50% on medium devices, and 33%/66% on large devices:
Example
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Make sure that the sum always equals 12.
Using Only Large
The .col-lg-6 class is the only one specified in the example below; .col-md-* and/or .col-sm-* are not present. Large devices will thus be divided 50% to 50%. However, it will stack vertically (100% width) for both medium-sized AND small devices:
Example
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-lg-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
