Bootstrap Grid System

Bootstrap grid system is used for designing page layout. It is very useful for responsive web designing. It offers 12 columns in a container. Using grid you can divide a container in various way.
The following figure describes the possible ways to divide a container using Bootstrap grid system:

There are four classes of Bootstrap grid system:

1. xs (for phones)
2. sm (for tablets)
3. md (for desktops)
4. lg (for large desktop)

Basic Structure of Grid System

Example:

Note: For a row you can add desired number of column but the number must be always add up to 12 for each row.

Examples Using Grid System

Here is a most basic example using grid system which gives a single column:

Example:

Here is an example using grid system which gives two equal column:

Example:

Here is an example using grid system which gives two unequal column:

Example:

Here is an example using grid system which gives three equal column:

Example:

Here is an example using grid system which gives various sizes column:

Example: