0113 815 4545
Our store

Our store

Read more

Search
Basket
Grids

Grids

Use the grid layout to organise content into equal columns. Rows are wrappers for columns and you can use multiple rows if required. The following column classes can be used to work across multiple devices.

  • Extra small (Mobile) = col-xs-
  • Small (Tablet) = col-sm-
  • Medium (Tablet Landscape) = col-md-
  • Large (Desktop) = col-lg-

Pro tip: Stick to the recommended layout examples. Check all devices to make sure the content displays correctly otherwise choose another layout.

Editorial Suite pro tip: You can make a grid into a feature grid so it displays wider than the content. See the Editorial Suite Helpers section on how to do this.

2 column layout

Can be used on extra small devices if the content displays as desired. If not use on small devices and up by replacing col- for col-sm.

Column
Column

3 column layout

We recommend a 3 column layout for small devices and up.

Column
Column
Column

4 column layout

We recommend a 4 column layout for medium devices and up.

Column
Column
Column
Column

2 & 4 column layout

Display as 2 columns on extra small and small devices and 4 columns on medium and up.

Column
Column
Column
Column