Bootstrap Grid System, Bootstrap Grid, Grid System, How to use Bootstrap Grid System, Bootstrap Grid System Classes, Grid System Classes, Use Bootstrap Grid

Bootstrap Grid System

Bootstrap gird system allow you 12 columns in a page. Its upto you how you use these 12 columns, if you don’t want to use all 12 columns individually then you can use these 12 columns as group, like you want 3 columns in your webpage then you can divide these 12 into 3. Now your one column will use 4 grid columns.

Example:-

For 12 Columns individually in a row

For 3 Columns in a row

For 2 Columns in a row

For Single Column in a row

As you know already Bootstrap gird system is responsive and columns will re-arrage depending on the screen size.

Gird System Classes

Bootstrap Grid system has 4 classes for different size screens like Mobile, Tab Desktop etc.

·         xs- xs class we use for phones screens less than 768px wide

·         sm- sm class we use for tablets screens equal to or greater then 768px wide

·         md- md class we use for small size laptops, screen size equal or greater than 992px wide.

·         lg- lg class we use for big screen laptop and desktops, screen size equal or greater then 1200px wide.

Grid System Rules

There are some basic ruls to use Bootstrap Grid System.

·         All Rows should be placed in .container class. container class we use for fixed-width or you can use .container-fluied for full page width, for proper alignment and padding.

·         You should 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

·         Column widths are in percentage, so they are always fluid and sized relative to their parent element

Basic Example of Structure of Bootstrap Grid System

<div class="container">

  <div class="row">

    <div class="col-*-*"></div>

    <div class="col-*-*"></div>

  </div>

  <div class="row">

    <div class="col-*-*"></div>

    <div class="col-*-*"></div>

    <div class="col-*-*"></div>

  </div>

  <div class="row">

    ...

  </div>

</div>

*instate of * you can use any class according to your screen, I mostly use md class