Bootstrap Grid

Wikipedia says:

"In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS."

Bootstrap Grid System

The Bootstrap Grid System allows up to 12 columns across the page. You can use all 12 columns individually or you can groups the columns together to create wider columns.

Bootstrap Grid System is responsive and the columns are re-arranged automatically according to the screen size.

Grid Classes:

There are four classes in Bootstrap Grid System:

• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)

You can combine the above classes to create more dynamic and flexible layouts.

Basic Structure of a Bootstrap Grid:

Follow the below instructions while creating a Bootstrap Grid:

• Create a row (<div class="row">).
• Add the number of columns, you want in the grid (tags with appropriate .col-*-* classes).
• Note that numbers in .col-*-* should always add up to 12 for each row.

Bootstrap Grid Example

For equal columns:

For unequal columns: