The grid

Contents

1. Get Started
2. Grid
3. Containers
4. Navbars
5. Positioning
6. Responsive
7. Typography
8. Images
9. Tables
10. Buttons
11. Forms
12. Callouts
13. Carousels

Viewport sizes

The grid framework is fully-responsive and based upon the viewport sizes shown in the table below. Additional helper classes may also target specific viewports. Responsive classes can easily be identified as they are generally suffixed by -xs, -sm, -md, -lg, and -xl.

Viewport size	Default width
Extra small	up to 479px
Small	480px to 719px
Medium	720px to 959px
Large	960px and up

Rows and columns

This framework uses a 12-column grid system. Grids are built in rows. Rows contain columns with classes that define the number (out of 12) columns that each should span. A 'mobile-first' implementation is used. This means that the column column classes will be applied to the specified viewport and larger.

Equal width columns

It is possible to have rows with 1, 2, 3, 4, 6, or 12 equal width columns. In this example, a column layout is defined for small viewports and larger. On extra-small viewports (typically phones in portrait orientation), the columns will simply stack.

  
<div class="row">
  <div class="col-sm-12">Column 1</div>
</div>

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

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

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

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

<div class="row">
  <div class="col-sm-1">Column 1</div>
  <div class="col-sm-1">Column 2</div>
  <div class="col-sm-1">Column 3</div>
  <div class="col-sm-1">Column 4</div>
  <div class="col-sm-1">Column 5</div>
  <div class="col-sm-1">Column 6</div>
  <div class="col-sm-1">Column 7</div>
  <div class="col-sm-1">Column 8</div>
  <div class="col-sm-1">Column 9</div>
  <div class="col-sm-1">Column 10</div>
  <div class="col-sm-1">Column 11</div>
  <div class="col-sm-1">Column 12</div>
</div>
  

Mixed width columns

It's totally fine to mix column widths. Just make sure that the sum of the column widths is 12 for each row.

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

<div class="row">
  <div class="col-sm-5">Column 1</div>
  <div class="col-sm-7">Column 2</div>
</div>

<div class="row">
  <div class="col-sm-2">Column 1</div>
  <div class="col-sm-2">Column 2</div>
  <div class="col-sm-8">Column 3</div>
</div>
  

Responsive columns

Column spans can vary based on viewport width. In this example, the columns will be full width on extra-small viewports but will each span one-third of the container on medium viewports and larger.

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

Here's how to have different column flows for three viewport widths. Remember, column classes are defined for the specified size and larger. In this example, columns will span 12 columns on extra-small and small viewports, 6 on medium, and 3 on large.

  
    <div class="row">
      <div class="col-xs-12 col-md-6 col-lg-3">Column 1</div>
      <div class="col-xs-12 col-md-6 col-lg-3">Column 2</div>
      <div class="col-xs-12 col-md-6 col-lg-3">Column 3</div>
      <div class="col-xs-12 col-md-6 col-lg-3">Column 4</div>
    </div>
  

Columns will be full width on extra-small devices by default and the col-xs-12 class can be omitted if desired. Therefore, the following code will produce the same result as the example above.

  
<div class="row">
  <div class="col-md-6 col-lg-3">Column 1</div>
  <div class="col-md-6 col-lg-3">Column 2</div>
  <div class="col-md-6 col-lg-3">Column 3</div>
  <div class="col-md-6 col-lg-3">Column 4</div>
</div>
  

Reverse the order of columns

Sometimes it may make sense for rows to be displayed in reverse order from markup. (Perhaps the order read by a screen reader should differ from the physical page layout.) In this case, a reverse class can be applied to rows.

  
<div class="row reverse">
  <div class="col-md-4">Column 1</div>
  <div class="col-md-4">Column 2</div>
  <div class="col-md-4">Column 3</div>
</div>
  

There are also responsive reverse classes that can be applied to specific viewport sizes: reverse-xs, reverse-sm, reverse-md, reverse-lg, and reverse-xl.

Changing the gutter between columns

There are three options for gutter size: gutter-default, gutter-double, and gutter-none.

Here's an example of a row with the default gutter. Applying the gutter-default class is optional.

  
<div class="row gutter-default">
  

Here's an example of a row with a double-width gutter.

  
<div class="row gutter-double">
  

Here's an example of a row with no gutter around columns.

  
<div class="row gutter-none">
  

Helpful gridlines

Because rows and columns have no visible styling, sometimes it can be a little confusing trying to get the grid correct when initially coding a layout. To help with this, a helper class show-gridlines can be applied to the body (or any element that contains rows). This class isn't meant to be applied to the final project, but it can be helpful when creating the initial layout or when debugging if something goes wrong.

Here's an example section with gridlines shown. You can see how the gridlines make it easy to identify errors.