Working of Bootstrap Grid System

Rows must be placed within a .container class for proper alignment and padding.
Content should be placed within the columns, and only columns may be the immediate
children of rows.
Classes avaliablerow
col-xs/sm/md/lg-*
.col-xs-4

-in * 1 to 12 value can be used

Class prefix .col-xs- .col-sm- .col-md- .col-lgWith the four tiers of grids available, you are bound to run into issues where at certain
breakpoints, the columns don't clear quite right as one is taller than the other. To fix that, use
a combination of a class .clearfix and the responsive utility classes as shown in the following
example
<div class = "container">
<div class = "row" >
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.</p>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim</p>
</div>
</div>
</div>

Offsets are a useful feature for more specialized layouts. They can be used to push columns over for
more spacing, (for example). The .col-xs = * classes dont support offsets, but they are easily
replicated by using an empty cell.
To use offsets on large displays, use the .col-md-offset-* classes. These classes increase the left
margin of a column by * columns where * range from 1 to 11.
In the following example, we have <div class = "col-md-6">..</div>, We will center this using class
.col-md-offset-3.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row" >
<div class = "col-xs-6 col-md-offset-3" style = "background-color:
#dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

This will produce the following result

Column Ordering
Another nice feature of Bootstrap grid system is that you can easily write the columns in an order,
and show them in another one. You can easily change the order of built-in grid columns with .colmd-push-* and .col-md-pull-* modifier classes where * range from 1 to 11.
In the following example we have two columns layout with left column being the narrowest and
acting as a sidebar. We will swap the order of these columns using .col-md-push-* and .col-mdpull-* classes.
<div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on left
</div>

Media Queries
Media query is a really fancy term for "conditional CSS rule". It simply applies some CSS,
based on certain conditions set forth. If those conditions are met, the style is applied.
Media Queries in Bootstrap allow you to move, show and hide content based on the viewport size.
Following media queries are used in LESS files to create the key breakpoints in the Bootstrap grid
system.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Occasionally these are expanded to include a max-width to limit CSS to a narrower set of devices.
@media
@media
@media
@media

(max-width:
(min-width:
(min-width:
(min-width:

@screen-xs-max)
@screen-sm-min)
@screen-md-min)
@screen-lg-min)

{ ... }
and (max-width: @screen-sm-max) { ... }
and (max-width: @screen-md-max) { ... }
{ ... }

Media queries have two parts, a device specification and then a size rule. In the above case, the
following rule is set
Let us consider this line
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

For all devices no matter what kind with min-width: @screen-sm-min if the width of the screen gets
smaller than @screen-sm-max, then do something.