BOOTSTRAP: Bootstrap Grid System Example

Bootstrap framework offers grid system with extensive use of div element which is dynamically compatible with all devices and screens. The main advantage of grid systems you get rid of the traditional HTML Tables as far as possible and use fluid div elements.

• Bootstrap Grid Classes
• Grid System Rules
• Structure of a Bootstrap Grid

The basic architecture of the grid system is that the screen is horizontally divided into maximum 12 columns (logically).It means grid system allows up to 12 columns across the page .If you don’t want to use all 12 column individually, you can group the columns together to create wider columns.

Bootstrap Grid Classes

The Bootstrap grid system has four classes, they are xs, sm, md and lg. These provided classes are used to create each combination of columns –for each device size. Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.

The following matrix illustrates this:

Class Names	Description
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1	Classes to use to consume one column in the corresponding device size.
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2	Classes to use to consume two columns in the corresponding device size.
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3	Classes to use to consume three columns in the corresponding device size.
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4	Classes to use to consume four columns in the corresponding device size.
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5	Classes to use to consume five columns in the corresponding device size.
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6	Classes to use to consume six columns in the corresponding device size.
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7	Classes to use to consume seven columns in the corresponding device size.
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8	Classes to use to consume eight columns in the corresponding device size.
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9	Classes to use to consume nine columns in the corresponding device size.
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10	Classes to use to consume ten columns in the corresponding device size.
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11	Classes to use to consume eleven columns in the corresponding device size.
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12	Classes to use to consume twelve columns in the corresponding device size.

Grid System Rules

Some Boot strap grid system rules,

• 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

Structure of a Bootstrap Grid

The following is the basic structure of the Bootstrap grid,

 class="container">
  


 class="row">
    


 class="col-*-*">


  


  


 class="row">
    


 class="col-*-*">


    


 class="col-*-*">


    

 class="col-*-*">

  


  

 class="row">
    ...
  

Let’s see with more Examples,

Scenario: 1
Suppose we want to create three equal columns – irrespective of all device sizes. The code for this is as follows:

 class="row">
  


 class="col-xs-4 col-sm-4 col-md-4 col-lg-4">   
 Column 1: col-xs-4 col-sm-4 col-md-4 col-lg-4 
 

 
 


 class="col-xs-4 col-sm-4 col-md-4 col-lg-4">    
Column 2: col-xs-4 col-sm-4 col-md-4 col-lg-4 
 

 
 

 class="col-xs-4 col-sm-4 col-md-4 col-lg-4">  
  Column 3: col-xs-4 col-sm-4 col-md-4 col-lg-4  

 

The output of the above code,

Note: Make sure that the sum always adds up to 12.
Scenario: 2
In the below code we are displaying only first two column in smaller screen and the third column will not be displayed. This is why we mentioned col-xs-6 in two columns, which is sum as 12.

 class="row">



 class="col-xs-6 col-sm-4 col-md-4 col-lg-4" style="background-color:#F0B2D1;">  
Column 1: display-xs,display-sm,display-md,display-lg 






 class="col-xs-6 col-sm-4 col-md-4 col-lg-4" style="background-color:#E066A3;">  
Column 2: display-xs,display-sm,display-md,display-lg  


  

 class="hidden-xs col-sm-4 col-md-4 col-lg-4" style="background-color:#D11975;">  
Column 3: hidden-xs,display-sm,display-md,display-lg 

The output of the above code

Scenario 3:
In smaller screens we need all the columns to be vertical. In medium screens first two columns should consume more space while in large screens they should be equal. Here is the code,

 class="row">



 class="col-xs-12 col-sm-5 col-md-5 col-lg-4" style="background-color:#F0B2D1;">  
 Column 1: vertical display-xs,column 1: large area display-sm,column 1: large area display-md,display-lg 






 class="col-xs-12 col-sm-5 col-md-5 col-lg-4" style="background-color:#E066A3;">  
Column 2: Vertical display-xs,column 2: large area display-sm,column 2: large area display-md,display-lg  


  

 class="col-xs-12 col-sm-2 col-md-2 col-lg-4" style="background-color:#D11975;">  
Column 3: Vertical display-xs,column 3: small area display-sm,column31: small areadisplay-md,display-lg 

 

The output of the above code,

 lang="en">


 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">

class="container">

class="row">

class="col-xs-12 col-sm-5 col-md-5 col-lg-4" style="min-height:200px;background-color:#F0B2D1;"> Column 1: vertical display-xs,column 1: large area display-sm,column 1: large area display-md,display-lg

class="col-xs-12 col-sm-5 col-md-5 col-lg-4" style="min-height:200px;background-color:#E066A3;"> Column 2: Vertical display-xs,column 2: large area display-sm,column 2: large area display-md,display-lg

class="col-xs-12 col-sm-2 col-md-2 col-lg-4" style="min-height:200px;background-color:#D11975;"> Column 3: Vertical display-xs,column 3: small area display-sm,column31: small areadisplay-md,display-lg

One of the most important points here is that the total size of the columns must always be 12 – if it is less than 12, some space will be left unused, if it is more than 12, the last placeholder will be wrapped in the next line.

As you can see in the above examples, the width (and visibility) of the three columns are being automatically controlled by the classes as per the target device and screen size. Hence, Bootstrap’s grid system enables you to create tabular layouts for all the device sizes quite effortlessly, and without any extra complex CSS/ JavaScript coding.