Responsive grid system

6 columns (list)

Grid is limited to 6 columns. More columns could be achieved using nesting.

• 1
• 2
• 3
• 4
• 5
• 6

6 columns (div)

6 columns with gutter

• 1
• 2
• 3
• 4
• 5
• 6

6 to 1

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4

• 1
• 2
• 3

• 1
• 2

• 1

6 to 1 with gutter

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4

• 1
• 2
• 3

• 1
• 2

• 1

6 columns responsive

Example:

• Desktop (default): 6 columns
• Tablet landscape (md): 4 columns
• Tablet portrait / Mobile landscape (sm): 2 columns
• Mobile portrait (xs): 1 column

Note: Setting data-columns to 0, md0, sm0 or xs0 will hide the column for that breakpoint.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

column span (how many data-columns an element should span across)

Example 1: 6 colums, 1 for each side panel and 4 for content.

• 1 column
• 4 columns
• 1 column

Example 2: 3 colums for content and a side menu of 2 columns

• 1
• 2
• 3
• Menu

Nested grids

Nested grids will be useful in case you need to split content inside a data-column.

Nested responsive grids

Same code as before, this time responsive:

• Desktop (default): 5 columns
  • Content: 3 columns
  • Menu: 2 columns (content: 2 columns)
• Tablet landscape (md):
  • Menu: 2 columns (content: 1 column)
• Tablet portrait / Mobile landscape (sm): 2 columns
  • Content: 1 column
  • Menu: 1 columns
• Mobile portrait (xs): 1 column
  • Content: 1 column
  • Menu: Removed

column offset (move columns to the right)

• No offset
• 1 column offset
• No offset

• 1 column offset
• 1 column offset

• 2 data-columns offset
• No offset

• 3 data-columns offset

Example: Centered content effect uisng column offset.

• 1 column offset

Responsive column offset

• Responsive offset