Grid structure

Introduction

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 for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-md-4 are available for quickly making grid layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-md-4.
  • more info

Example columns

1
1
1
1
1
1
1
1
1
1
1
1
3
3
3
3
4
4
4
4
8
6
6
12

Offsetting columns

4
4 (Offset 4)
3 (Offset 3)
3 (Offset 3)
6 (Offset 3)