Understanding bootstrap rows and columns

Bootstrap is popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. The design is very simple and one can work on a page that will rendered based on the size of the window.
Bootstrap is responsive and NOT adaptive. Understanding the page to be going to work on is important to make it successful. To have a general idea; Bootstrap uses rows and columns that the page can be divided into.

1. Single Column

 <div class="row">   
 <div class="col-lg-12">Single column </div>  
 </div>  

2. Two Columns

 <div class="row">   
 <div class="col-lg-6">Left column </div>  
 <div class="col-lg-6">Right column </div>  
 </div>  

Likewise you can go for balanced columns or you can choose how to divide the page in to. The following code from bootstrap.css will explain how you can choose it to be divided into. Simple math will let you have a good design.

 .col-lg-12 {  
   width: 100%;  
  }  
  .col-lg-11 {  
   width: 91.66666667%;  
  }  
  .col-lg-10 {  
   width: 83.33333333%;  
  }  
  .col-lg-9 {  
   width: 75%;  
  }  
  .col-lg-8 {  
   width: 66.66666667%;  
  }  
  .col-lg-7 {  
   width: 58.33333333%;  
  }  
  .col-lg-6 {  
   width: 50%;  
  }  
  .col-lg-5 {  
   width: 41.66666667%;  
  }  
  .col-lg-4 {  
   width: 33.33333333%;  
  }  
  .col-lg-3 {  
   width: 25%;  
  }  
  .col-lg-2 {  
   width: 16.66666667%;  
  }  
  .col-lg-1 {  
   width: 8.33333333%;  
  }  

Start designing your own pages. No more designers LOL.

Download it here:
http://getbootstrap.com