Basics

Grid system

We use the Bootstrap framework grid system for our layouts. This is based on a 12 column grid. We have also created a custom five column grid which has column widths of 20, 40, 60 and 80 percent.

Read the official Bootstrap documentation for the grid system.

Bootstrap grid

Bootstrap 3 includes predefined grid classes for quickly making grid layouts for different types of devices like mobiles, tablets, laptops and desktops, etc. For example, you can use the .col-xs-* class to create grid columns for extra small devices like cell phones, similarly the .col-sm-* class for small screen devices like tablets, the .col-md-* class for medium size devices like desktops and the .col-lg-* for large desktop screens. The following table summarizes some of the key features of the new grid system.

Top of page

Custom grid

We also have a custom grid which extends Bootstrap to allow us to have 5 column grids.

The custom five column grid has column widths of 20, 40, 60 and 80 percent.

These custom grid classes can be mixed with the default Bootstrap grid classes as long as columns add up to 100%.

Top of page