Bootstrap CSS – Grid System

Bootstrap is divided into 12 columns. It includes predefined classes for simple layout. Also you can design complex layout with easy predefined classes.

Class hierarchy is given as per follow :

  • .container or .container-fluid : This is a main class. .container-fluid is used for full width
    • .row – This class is used to make horizontal group of columns. After this class children must be .col-*
      • .col-* – This is used to display content.

 

Bootstrap has inbuilt classed to display page responsive.

Classes bifurcation is as per below.

  • For Large device : col-lg-*
  • For Medium device : col-md-*
  • For Small device : col-sm-*
  • For Extra small device : col-xs-*

Now, we learn how to display columns.

    1. To display content in full page.
    2. To display content in equal two column.
    3.  To display content in equal three column.

You can replace -md with -lg,-sm-xs according to device support.