Understanding Bootstrap 3 Grid Layout System

• Bootstrap is HTML, CSS, JS framework for developing responsive websites.
• Bootstrap v3 uses mobile first approach. Layout is assumed to be designed for mobile devices i.e, for extra small view port. All element are stacked one over the other by default.
• The grid (viewport) is divided into 12 equally spaced cells/columns.If we want some element to use two cell spaces we will mention col-xx-2 and you can give other element all remaining cell using col-xx-10. xx declares viewport

<div class ="row">
<div class="col-xs-2"> First 2</div>
<div class="col-xs-10"> Remaining 10</div>
</div>

• When column class col-xs-6 is specified, it means that on extra small device screen, divide screen in half i.e, give six cell space to this element.
  
• col-md-4 mean on medium size screen, give this element 4 column space.
• <div class="col-xs-6 col-md-4"> means on extra small screen this element will take 6 column space and on medium size screen 4

<div class ="row">
<div class="col-xs-2"> First 2</div>
<div class="col-xs-10"> Remaining 10</div>
</div>

Rendering on Extra small device browser

 Rendering on Medium size screen[/caption]

•  col-xx-n class adds padding of 15px on right and left. To counter that on right and left edge of a row, class "row" adds padding of -15px on left and right.
•  .container class has one fixed width for each screen size(xs, md..) something like  @media (min-width: 992px) {
  .container {
  width: 970px;
  }
  }
  .container-fluid expands to fill available width.