Grid - Basic Elements - Pattern Library

Basics

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
Custom grid

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.

col-sm-1

col-sm-2

col-sm-3

col-sm-4

col-sm-6

<div class="row">
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
    <div class="col-sm-1">
        <div>col-sm-1</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-2">
        <div>col-sm-2</div>
    </div>
    <div class="col-sm-2">
        <div>col-sm-2</div>
    </div>
    <div class="col-sm-2">
        <div>col-sm-2</div>
    </div>
    <div class="col-sm-2">
        <div>col-sm-2</div>
    </div>
    <div class="col-sm-2">
        <div>col-sm-2</div>
    </div>
    <div class="col-sm-2">
        <div>col-sm-2</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-3">
        <div>col-sm-3</div>
    </div>
    <div class="col-sm-3">
        <div>col-sm-3</div>
    </div>
    <div class="col-sm-3">
        <div>col-sm-3</div>
    </div>
    <div class="col-sm-3">
        <div>col-sm-3</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        <div>col-sm-4</div>
    </div>
    <div class="col-sm-4">
        <div>col-sm-4</div>
    </div>
    <div class="col-sm-4">
        <div>col-sm-4</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <div>col-sm-6</div>
    </div>
    <div class="col-sm-6">
        <div>col-sm-6</div>
    </div>
</div>

Rows must be placed within a container or container-fluid.
All columns in a row must add up to 12.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on rows.
For column classes, start from xs up to lg. For example, class="col-xs-12 col-sm-12 col-md-6 col-lg-4".
If the next column class is the same size, you can remove it. For example, class="col-xs-12 col-sm-12 col-md-6 col-lg-6" can be class="col-xs-12 col-md-6". The small (sm) columns has 12 and are the same as extra small (xs) and the medium (md) has 12 columns, the same as extra large (lg). The small and large classes will be inherited.

Read the official Boostrap documentation for the grid system.

	Extra small devices Phones (< 768px)	Small devices Tablets (≥ 768px)	Medium devices Desktops (≥ 992px)	Large devices Desktops (≥ 1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	750px	970px	1170px
Class prefix	`col-xs-`	`col-sm-`	`col-md-`	`col-lg-`
# of columns	12
Column width	Auto	~62px	~81px	~97px
Gutter width	10px (5px on each side of a column)

N/A

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%.

col-xs-20

col-xs-40

col-xs-20

col-xs-60

col-xs-40

col-xs-60

col-xs-80

col-xs-20

col-xs-80

<div class="row">
    <div class="col-xs-20">
        <div>col-xs-20</div>
    </div>
    <div class="col-xs-20">
        <div>col-xs-20</div>
    </div>
    <div class="col-xs-20">
        <div>col-xs-20</div>
    </div>
    <div class="col-xs-20">
        <div>col-xs-20</div>
    </div>
    <div class="col-xs-20">
        <div>col-xs-20</div>
    </div>
</div>
<div class="row">
    <div class="col-xs-20">
        <div>col-xs-20</div>
    </div>
    <div class="col-xs-40">
        <div>col-xs-40</div>
    </div>
    <div class="col-xs-40">
        <div>col-xs-40</div>
    </div>
</div>
<div class="row">
    <div class="col-xs-40">
        <div>col-xs-40</div>
    </div>
    <div class="col-xs-40">
        <div>col-xs-40</div>
    </div>
    <div class="col-xs-20">
        <div>col-xs-20</div>
    </div>
</div>
<div class="row">
    <div class="col-xs-60">
        <div>col-xs-60</div>
    </div>
    <div class="col-xs-40">
        <div>col-xs-40</div>
    </div>
</div>
<div class="row">
    <div class="col-xs-40">
        <div>col-xs-40</div>
    </div>
    <div class="col-xs-60">
        <div>col-xs-60</div>
    </div>
</div>
<div class="row">
    <div class="col-xs-80">
        <div>col-xs-80</div>
    </div>
    <div class="col-xs-20">
        <div>col-xs-20</div>
    </div>
</div>
<div class="row">
    <div class="col-xs-20">
        <div>col-xs-20</div>
    </div>
    <div class="col-xs-80">
        <div>col-xs-80</div>
    </div>
</div>

Rows must be placed within a container or container-fluid.
All columns in a row must add up to 100.
The custom grid doesn't have offsets.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on rows.

N/A

Top of page

Changelog

Added	Updates	Current version	Accessibility	Status
10 Aug 2016	15 Dec 2016 - Added custom grid	1.1.0	N/A	Current

Top of page

Grid system

Bootstrap grid

Custom grid

Changelog