Grid System For Responsive Design in Bootstrap

All list of bootstrap classes” are really help you to understand the concept of Bootstrap . And in this article we will learn the most important feature of bootstrap i.e called Grid System . Well as i mention in previous blog, bootstrap is used in the market with its responsiveness feature and grid system is describe. the concept of how its actual work.

What is Grid System

Grid is the responsive  system, a fast, easy and flexible way to create a responsive web site . Grid system provides the way to divide page into the blocks i.e called columns.Bootstrap's grid system allows up to 12 columns across the page. Its depends on the designer how they used it, can be individually or together as per requirement. Group of 12 columns called row. See following example of how basic struture of page look like:

Col 1

Col 1

Col 1

Col 1

Col 1

Col 1

Col 1

Col 1

Col 1

Col 1

Col 1

Col 1

Col 4

Col 4

Col 4

Col 4

Col 8

Col 6

Col 6

Col 12

 As I shown in above table of columns with different size , its all define by the classes, bootstrap grid system has four classes those following as:

xs (for smartphones )

 sm (for smart tablets)

md (for Notebooks and small desktops)

lg (for larger desktops)

Each classes used and define by the designer for all viewports as per requirements,so lets make your web responsive.

Grid System Rules

Bootstrap has some rules to using Grid system those are following as:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding

Use rows to create horizontal groups of columns

Content should be placed within columns, and only columns may be immediate children of rows Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts

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

Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three  .col-sm-4.

 All above rules are define from the main site of bootstrap there is no mistake in defining, you can apply all in your designing code. Lets see the basic structure of grid system:

 <div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"></div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"></div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"></div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

You can also download grid system file from grid system site also , I’m a designer and I know how it helping me for developing a good responsive web site . I hope you know the little bit of “what is Grid System” know , any question regarding this post you can comment in comment section we try to connect with our users. Thankyou!!!.To check all design related blogs click on web designing blog and visit from oldest to latest blogs.