Grid

We use grids in design to create consistent layouts across multiple views ports. It helps us to put content into ways that make it easier to consume. Implement these grids into your application to get a fully responsive experience out of the box. For an example see the Bootstrap grid.

Demo

First column

Second column

Third column

Code snippet

						
<div class="container">
  <div class="row">
    <div class="col-md-4">
      First column
    <div>
    <div class="col-md-4">
      Second column
    <div>
    <div class="col-md-4">
      Third column
    <div>
  <div>
<div>

Breakpoints

XXL - 1440px and above

12 columns
Gutter width: 48px (24px on each side of column)
Max container width: 1488px

Extra extra large grid showing 12 equal columns with a 48 pixel gutter between each

XL - 1200px-1439px

12 columns
Gutter width: 36px (18px on each side of column)
Max container width: 1284px

Extra large grid showing 12 equal columns with a 36 pixel gutter between each

L - 1024px-1199px

12 columns
Gutter width: 36px (18px on each side of column)
Max container width: 1115px

Large grid showing 12 equal columns with a 36 pixel gutter between each

M - 640px-1023px

12 columns
Gutter width: 18px (9px on each side of column)
Max container width: 945px

Medium grid showing 12 equal columns with a 36 pixel gutter between each

S - up to 639px

4 columns
Gutter width: 18px (9px on each side of column)
Max container width: 591px