Bootstrap Tutorial : Grid System Bootstrap

Grid System Bootstrap - Bootstrap tutorial for beginner how to understand with System Grid in bootstrap templates, What is Bootstrap Grid System? In Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases (max columns is 12).

On previews lessons, we have learn how to getting started using Bootstrap templates, just go to this link.

Understanding Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

1. Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
2. Use rows to create horizontal groups of columns.
3. Content should be placed within columns, and only columns may be immediate children of rows.
4. Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
5. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
6. The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
7. Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
8. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
9. Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

More references here http://getbootstrap.com/css/
We will learn about Grid System in bootstrap for step by step

#Three Column Bootstrap Layouts

Following this HTML source code

   <div class="container">
      <!--Row with three equal columns-->
      <div class="row">
        <div class="col-sm-4">
          it's left column
        </div>
        <div class="col-sm-4">
          it's middle column
        </div>
        <div class="col-sm-4">
          it's right column
        </div>
      </div>
    <!--Row with three columns divided in 1:4:1 ratio-->
    <div class="row">
        <div class="col-md-2">
          this is left column
        </div>
        <div class="col-md-8">
          this is middle column
        </div>
        <div class="col-md-2">
          this is right column
        </div>
      </div>
    </div>

#Bootstrap Layouts with Column Wrapping Feature

We will need Wrapping Feature for work with viewport size, The following example will create a three column layout on medium devices like laptops and desktops, as well as on tablets (e.g. Apple iPad) in landscape mode.

First, add an simple css in our idex.html file

<style type="text/css">
      /* Some custom styles to beautify this example */
      .demo-content{
          padding: 15px;
          font-size: 18px;
          min-height: 300px;
          background: #dbdfe5;
          margin-bottom: 10px;
      }
      .demo-content.bg-alt{
          background: #abb1b8;
      }
      /* Some custom media query to make
         this example even better */
      @media screen and (max-width: 991px){
          .flexible{
              min-height: 150px;
          }
      }
    </style>

Next, add wrapping feature

<div class="container">
      <!-- Bootstrap Layouts with Column Wrapping Feature -->
      <div class="row">
        <div class="col-sm-3 col-md-2">
          <div class="demo-content">.col-sm-3 .col-md-2</div>
        </div>
        <div class="col-sm-9 col-md-8">
          <div class="demo-content">.col-sm-9 .col-md-8</div>
        </div>
        <div class="col-sm-12 col-md-2">
          <div class="demo-content">.col-sm-12 .col-md-2</div>
        </div>
      </div>
    </div>

Bootstrap Grid Options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Video tutorial Grid System Bootstrap

See you next Lessons