Layouts

Rows

Make rows using the row class.

This is a row!

Rows and Columns

Create columns inside of rows using the row class. Columns will overflow onto a new row automatically if their contents is greater than the width of the row.

Column 1

Column 2

Column Sizes

A standard row can contain up to 12 columns, set the width of a column using a number from 1 to 12 within the class. If the sum of your columns is greater than 12, the columns will wrap within the row. Columns will also expand to 100% width when the page is less than 768px wide. Use the mobile class to stop them collapsing on mobile.

class="column 3"

class="column 6" I'm half of the row (6/12ths)

class="column 5"

class="column 3"

class="column 4"

Positioning

Center columns within a row or center content within a column horizontally or vertically.

Horizontally: x-centered.

Vertically: y-centered.

Horizontally and vertically: centered.

To save having to manually add the centered class to each column, center all class content within a row using:

Horizontally: cols-x-centered.

Vertically: cols-y-centered.

Horizontally and vertically: cols-centered.

Centered content

Nested Layouts

Create complicated layouts easily by nesting rows within columns.

column 1 (in row 1)

column 8 (in row 2)

column 4 (in row 2)

Inside the column

column 2 (in row 1)

Layout extras

Extra classes not mentioned above.

Row

full-height Set the row to the full height (100vh) of the page.

half-height Set the row to half the height (50vh) of the page.

overflow Sets the rows overflow to auto.

rounded Rounds the corners of the row and hides the row overflow.

Column

narrow Stops the column from automatically growing when it has no set width by setting the flex-grow property to 0.

overflow-x Sets overflow-x to auto.

overflow Sets the rows overflow to auto.

rounded Rounds the corners of the column and hides the column overflow.