The Grid System

The Grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Tip: Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.

The Grid System has four classes:

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

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.

Grid System Rules

• Rows must be placed within a Responsive Layout
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate children of rows
• Columns are created by specifying the number of 12 available columns you wish to span. For example, Three equal columns would use three Columns set to a width of 4; 4+4+4 = 12;