Bootstrap comes with a grid system you can use. It has 12 columns that are available, and they take up 100% of the content’s width. This allows the grid to resize depending upon the size of the browser window. Once it reaches a certain size, the items will auto adjust to a new row, to allow the content to not be put into too skinny of a column.

To use the grid system, you need to define what is in a row. Then define your grid usage by specifying how many columns your content is going to use, as shown below.

  
.col-md-6 -- this is even columns
  
.col-md-6



  
.col-md-4 -- a narrow column
  
.col-md-8 -- the wider column



  
.col-md-4 -- three columns
  
.col-md-4 -- three columns
  
.col-md-4 -- three columns

Using the col-md-* classes means that it is designed for a medium size monitor. You can also use col-xs-* for extra small (phone), col-sm-* for small (tablet), and col-lg-* for larger monitors.

Making Columns have the Same Height

Sometimes you will have content in multiple columns, that will not be the same height. If you have equal numbers of columns in all cases this isn’t an issue, but what about situations where you want to provide hinting to smaller devices, and auto send them into smaller columns as necessary? This is where you use the class clearfix, in a separate div to add the necessary height to the smaller column(s)/div(s) so you can get new rows.

  
Large crazy content
  
small little content

  
  


  
small content
  
small little content
 

Watch on YouTube

Offsetting Columns

You don’t have to put columns right next to each other. Instead, you can offset them, so you can move them a column, two, or more, from each other. Use the classes that look like .col-md-offset-* to push the next column to the right.

  
.col-md-4
  
.col-md-4 .col-md-offset-4




  
.col-md-6 .col-md-offset-3 

The Grid System within Bootstrap was originally found on Access 2 Learn