Overview

The Grid system is the basis for understanding reponsive web design. BaseCamp uses the reponsive, mobile first fluid grid system developed by Bootstrap that appropriately scales up to 12 columns as the device or viewport size changes.

Open page in modal (testing)

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the grid system works:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts.
  • 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.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

Basic Markup

There are four different grid classes you can use to define your layouts.

  • .col-xs-* Phones >0px
  • .col-sm-* Tablet ≥768px
  • .col-md-* Desktops ≥992px
  • .col-lg-* (large - Desktops ≥1200px)

See how aspects of the BaseCamp grid system work across multiple devices with a handy table.

Phones (<768px)Tablets (≥768px)Desktops (≥992px)Large devices Desktops (≥1200px)
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)750px992px1170px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns12
Column widthAuto60px78px95px
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Basic Single Columns

You have 2 divs and you want each to be 50% of the total container

I'm on the left
I'm on the right
<div class="row">
<div class="col-xs-6">I'm on the left </div>
<div class="col-xs-6">I'm on the right</div>
</div>

Since this is a mobile first framework, all of the base columns are assumed to be 100% width, stacked vertically. In the example above, if you wanted these 2 divs to be 50%/50%, you would first have to decide at which breakpoints. If you want them to be 50%/50% down to the desktop size, but not tablet or phone, it would be written like this:

<div class="row">
<div class="col-md-6">I'm on the left </div>
<div class="col-md-6">I'm on the right</div>
</div>

This makes a 6 column at the medium size and up. Remember there are 12 columns to work with so 50% of the row would be a 6 column. Anything smaller than medium, it goes back to the 100% width stacked layout. This is mobile first, everything assumes that you are designing for a mobile, extra small viewport. Let’s say you want it to be a 50%/50% split all the way down to the smallest phone width, no matter what. You would use the .col-xs-6 class which keeps the columns at 50% width all the way down to the phone size. It would be written like this:

<div class="row">
<div class="col-xs-6">I'm on the left </div>
<div class="col-xs-6">I'm on the right</div>
</div>

This keeps the 6 column width all the way down to the smallest size and never switches to the stacked mobile layout. That means on a device with a browser width less than 768px it will maintain the 50%/50% split on the columns since you used the specific .col-xs-6 class. If for example you want to have the same divs be 50%/50% at the largest snapping point only then you would write it this way:

<div class="row">
<div class="col-lg-6">I'm on the left </div>
<div class="col-lg-6">I'm on the right</div>
</div>

That tells it to apply the “6 column” size only at the large size and up. As you hit the break point going narrower, it will again assume that it’s a mobile design and take it to 100% width. Example 1 demonstrates this concept.

See Example 1

Mixed Width Columns

You can combine the grid classes to change the width of the columns depending on viewport size. For example, let’s say that you want it 50%/50% at medium, but at the large size your design would go to 33%/66%.

<div class="row">
<div class="col-md-6 col-lg-4">I'm on the left </div>
<div class="col-md-6 col-lg-8">I'm on the right</div>
</div>

At the medium size, we use the classes with .col-md- in them. At the large size, we use the classes with .col-lg- in them. In this case, our 2 divs will go from a 50%/50% split and then up to a 33%/66%. This can be taken to another level, where we want to change it for the extra small device size as well. For example, to add the option for the columns to be split 25%/75% for tablets, we write it like this:

<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">I'm on the left </div>
<div class="col-sm-9 col-md-6 col-lg-8">I'm on the right</div>
</div>

This gives us 3 different column layouts at each point. On a extra small device, it will be 25% on the left, and 75% on the right. On a small device (tablet), it will be 50%/50% and on a large viewport, it will be 33%/66%. This is demonstrated in example 2:

See Example 2

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

Resize your viewport or check it out on your phone for an example.

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

<div class="clearfix visible-xs-block">
<p>Add the extra clearfix for only the required viewport</p>
</div>

<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Offsetting columns

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.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<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 class="row">
<div class="col-md-6 col-md-offset-3">
.col-md-6 .col-md-offset-3
</div>
</div>

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12 or less.

Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6
<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row show-grid">
  <div class="col-md-6">
    Level 2: .col-md-6
  </div>
  <div class="col-md-6">
    Level 2: .col-md-6
  </div>
</div>
</div>
</div>

Column ordering

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

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row show-grid">
<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>

Responsive utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

Extra small devicesPhones (<768px)Small devicesTablets (≥768px)Medium devicesDesktops (≥992px)Large devicesDesktops (≥1200px)
.visible-xsVisible
.visible-smVisible
.visible-mdVisible
.visible-lgVisible
.hidden-xsVisibleVisibleVisible
.hidden-smVisibleVisibleVisible
.hidden-mdVisibleVisibleVisible
.hidden-lgVisibleVisibleVisible
See Example 3

Print Classes

Similar to the regular responsive classes, use these for toggling content for print.

ClassBrowserPrint
.visible-printVisible
.hidden-printVisible