Bootstrap Grids

Grid structure content and helps in designing it perfectly. Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Here's how the Bootstrap grid system works −

• Rows must be placed within a .container class for proper alignment and padding.
• Use rows to create horizontal groups of columns.
• Content should be placed within the columns, and only columns may be the immediate children of rows.
• Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and the last column via negative margin on .rows.