Grid System

Our frontend system is based on Bootstrap 3, which includes several components and options for laying out your pages. You can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.

Container

Containers are the most basic layout element in Bootstrap and are required when using our grid system. In most cases, you'll want to use a .container-fluid for a full width container, spanning the entire width of the viewport.

Rows & Columns

For proper alignment and padding, .row must be placed within either a .container or .container-fluid. Columns should be immediate children of rows, and only columns should contain content.

Columns use an equal amount of space in the parent container. This automatic sizing allows you to achieve most desired outcomes. Our system is composed of 12 flexible columns with a 40px gutter (20px on the left and right of each column).

You can specify columns to span across the 1-12 columns.

      
<div class="container-fluid">
  <div class="row">
    <!-- combination of columns -->
  </div>
</div>

Media Queries

We use the following media queries in our Less files to create the key breakpoints in our grid system.

          
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Example

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-3
.col-md-9
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
      
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

Offsetting Columns

Move columns to the right using .col-md-offset-* classes. The left margin of a column will be increased by * columns.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
      
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  </div>
</div>

Column Ordering

Change the order of grid columns with .col-md-push-* and .col-md-pull-* modifier classes. For example, stacked content on mobile can be reordered horizontally on desktop (medium) devices.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
      
<div class="container-fluid">
  <div class="row">
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  </div>
</div>