5-column grid layout
beta

Like the standard 12-column grid, the 5-column grid is based on the Bootstrap css library. Please read the source documentation. The purpose of the grid system is to create a responsive layout by grouping several divs together, known as columns. These divs shuffle their order depending on the width of the viewport, creating a layout that works at any viewport size.

Also like the standard 12-column grid, the 5-column grid must follow a strict markup to insure that the page will look and behave as expected. Please become familiar with standard grid markup before coding a 5-column grid.

The 5-column grid has an additional row class, <div class="row row-grid-5">.

(For all three examples below, on a mobile device, each column is its own row.)

Below is a 12-column standard grid with 5 2-column elements and an offset of 1-column. class="col–xs–12 col–sm–2 col–sm–offset–1".

If your design expects five columns to take up the entire width of the page or parent element, the standard 12-column grid system will not work.

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 2

Nunc efficitur quam vitae imperdiet blandit.

Column 3

Donec ultrices volutpat odio a ultricies.

Column 4

Pellentesque et quam maximus, rhoncus orci eget, dignissim odio.

Column 5

Aenean ac ipsum nec nibh vestibulum varius sed et orci.

row
column

To fill the width of the page or parent element with 5 columns, use the 5-column grid.

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 2

Aenean ac ipsum nec nibh vestibulum varius sed et orci.

Column 3

Donec ultrices volutpat odio a ultricies.

Column 4

Pellentesque et quam maximus, rhoncus orci eget, dignissim odio.

Column 5

Nunc efficitur quam vitae imperdiet et blandit.

row
column
  

Column 1

Lorem ipsum ...

Column 2

Aenean ac ipsum ...

Column 3

Donec ultrices ...

Column 4

Pellentesque et ...

Column 5

Nunc efficitur ...

done

It is possible to use both grid systems together to achieve certain designs. For example, you can create a 5-column grid within a standard 8-column-centered grid (or any size grid, centered or otherwise).

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 2

Aenean ac ipsum nec nibh vestibulum varius sed et orci.

Column 3

Donec ultrices volutpat odio a ultricies.

Column 4

Pellentesque et quam maximus, rhoncus orci eget, dignissim odio.

Column 5

Nunc efficitur quam vitae imperdiet et blandit.

row containing .col-centered-8
row-grid-5
column
  

Column 1

Lorem ipsum ...

Column 2

Aenean ac ipsum ...

Column 3

Donec ultrices ...

Column 4

Pellentesque et ...

Column 5

Nunc efficitur ...

done