Layout
beta

Understanding our grid system is one of the most important aspects of the Design Language. Our grid system is based on the Bootstrap css library. Please read the source documentation thoroughly. Below you will see a few common constructs (some directly from the source) of how to implement the grid.

A column is the most basic unit of our grid. It can be as tall as you want, but its width depends on the size of the device you’re viewing it on.

Each column has a padding on either side, called a gutter, of 10px.

10px padding left 10px 10px padding right 10px

Columns are contained in rows. The columns get wider or narrower depending on how many there are in a row. The most columns you can have in one row is 12.

The container has a max width of 1200px and a min width of 320px. The container also has a padding-left and padding right of 10px.

Below is a visual representation of the grid.

  • The gray represents the container.
  • The magenta line represents the row. Note the negative margins cover the gray of the container.
  • The blue box represents a column.
  • The cyan box represents a column padding.

Click on an icon to see different breakpoints

Parent elements can be any semantically correct element. Common parent elements are the section, nav, footer

A parent element must encapsulate the .container.

The .row must be placed within a .container for proper alignment and padding.

All .col-*-* classes are children of the .row class.

The code snippet shown here illustrates how each section should be constructed.

 

The centered column is an esstential layout principle of the Design Language. It provides the ability to easily and responsively create centered layouts.

Centered columns must be an even number 2 through 10. The centered column you are establishing is the column at the largest breakpoint.

The column centered helper classes establish a consistent centered column experience by using consistent offsets on each breakppint. This means that the breakdown from mobile to desktop are mathematically decided based on the column centered layout chosen.

You can use the column centered helper exactly as if it was another column by simply applying col-centered-*; after a <div class="row">.

Column centered is also available and exposed as a mixin for your custom use. The @include col-centered(x: optional); mixin can be used to create a centered offset layout without using the helper classes. This can provide useful when working complex layouts or components.

A full breakdown of the columns on each breakpoint is provided as follows:

Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Column centered 10 12 columns 12 columns 10 columns 10 columns
Column centered 8 12 columns 10 columns 8 columns 8 columns
Column centered 6 12 columns 8 columns 6 columns 6 columns
Column centered 4 12 columns 6 columns 4 columns 4 columns
Column centered 2 12 columns 4 columns 2 columns 2 columns

Column centered 10
Column centered 8
Column centered 6
Column centered 4
Column centered 2

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns.

For example .col-md-offset-4 moves .col-md-4 over four columns

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

Column One
Column Two
Column One
Column Two
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Container Padding 10px 10px 10px 10px
Class Prefix .col-xs-* .col-sm-* .col-md-* .col-lg-*
# of Columns 12
SASS Mixins No mixins @include breakpoint(sm) {} @include breakpoint(md) {} @include breakpoint(lg) {}

Like the standard 12-column grid, the 5-column grid should be in a container div <div class="container">…</div> which is in a section <section>…</section>.

Also, like the standard grid, each "row" of columns should be in a row div but with the additional class of row-grid-5 <div class="row row-grid-5">…</div>. The most columns you can have in a row is 5.

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

Below is a 12-column standard Bootstrap/Design Language grid with 5 2-column elements. In order to make this work, there is an empty 1-column element on each side. The row has a blue background to better demonstrate the spacing and also see the difference between this example and the 5-column grid examples below.

If your design/layout calls for five columns which take up the entire width of the page or parent element, the standard 12-column grid system will not work and the example below becomes broken.

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.

To fill the width of the page or parent element with 5 columns, use the 5-Column-Grid. This row also has a blue background. Compare this example to the one above.

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.

Column 1

Lorem ipsum ...

Column 2

Aenean ac ipsum ...

Column 3

Donec ultrices ...

Column 4

Pellentesque et ...

Column 5

Nunc efficitur ...

It is possible to use both grid systems to achieve certain designs. For example, you can create a 5-column grid within a standard 8-column-centered grid (or any size centered grid). The row containing the col-centered-8 element has a yellow background while the row-grid-5 row has a blue background to better demonstrate the spacing, centering, and how the grid works.

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 blandit

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 blandit