Appearance

Grid System ​

Click to preview the Grid System demo. View demo

Stacked-to-horizontal ​

Code:

html
<div class="row">
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
  <div class="col-md-1">
    <div class="pane-area">.col-md-1</div>
  </div>
</div>
<div class="row">
  <div class="col-md-10">
    <div class="pane-area">.col-md-10</div>
  </div>
  <div class="col-md-2">
    <div class="pane-area">.col-md-2</div>
  </div>
</div>
<div class="row">
  <div class="col-md-9">
    <div class="pane-area">.col-md-9</div>
  </div>
  <div class="col-md-3">
    <div class="pane-area">.col-md-3</div>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="pane-area">.col-md-8</div>
  </div>
  <div class="col-md-4">
    <div class="pane-area">.col-md-4</div>
  </div>
</div>
<div class="row">
  <div class="col-md-7">
    <div class="pane-area">.col-md-8</div>
  </div>
  <div class="col-md-5">
    <div class="pane-area">.col-md-4</div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="pane-area">.col-md-6</div>
  </div>
  <div class="col-md-6">
    <div class="pane-area">.col-md-6</div>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="pane-area">.col-md-4</div>
  </div>
  <div class="col-md-4">
    <div class="pane-area">.col-md-4</div>
  </div>
  <div class="col-md-4">
    <div class="pane-area">.col-md-4</div>
  </div>
</div>
<div class="row">
  <div class="col-md-3">
    <div class="pane-area">.col-md-3</div>
  </div>
  <div class="col-md-3">
    <div class="pane-area">.col-md-3</div>
  </div>
  <div class="col-md-3">
    <div class="pane-area">.col-md-3</div>
  </div>
  <div class="col-md-3">
    <div class="pane-area">.col-md-3</div>
  </div>
</div>

Mobile and desktop ​

Code:

html
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">
    <div class="pane-area">.col-xs-12 .col-md-8</div>
  </div>
  <div class="col-xs-6 col-md-4">
    <div class="pane-area">.col-xs-6 .col-md-4</div>
  </div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">
    <div class="pane-area">.col-xs-6 .col-md-4</div>
  </div>
  <div class="col-xs-6 col-md-4">
    <div class="pane-area">.col-xs-6 .col-md-4</div>
  </div>
  <div class="col-xs-6 col-md-4">
    <div class="pane-area">.col-xs-6 .col-md-4</div>
  </div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">
    <div class="pane-area">.col-xs-6</div>
  </div>
  <div class="col-xs-6">
    <div class="pane-area">.col-xs-6</div>
  </div>
</div>

Mobile, tablet, desktop ​

Code:

html
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">
    <div class="pane-area">.col-xs-12 .col-sm-6 .col-md-8</div>
  </div>
  <div class="col-xs-6 col-md-4">
    <div class="pane-area">.col-xs-6 .col-md-4</div>
  </div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">
    <div class="pane-area">.col-xs-6 .col-sm-4</div>
  </div>
  <div class="col-xs-6 col-sm-4">
    <div class="pane-area">.col-xs-6 .col-sm-4</div>
  </div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">
    <div class="pane-area">.col-xs-6 .col-sm-4</div>
  </div>
</div>

Column wrapping ​

Code:

html
<div class="row">
  <div class="col-xs-9">
    <div class="pane-area">.col-xs-9</div>
  </div>
  <div class="col-xs-4">
    <div class="pane-area">.col-xs-4<br>
      Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  </div>
  <div class="col-xs-6">
    <div class="pane-area">.col-xs-6<br>
      Subsequent columns continue along the new line.</div>
  </div>
</div>

Responsive column resets ​

Code:

html
<div class="row">
  <div class="col-xs-6 col-sm-3">
    <div class="pane-area">.col-xs-6 .col-sm-3</div>
  </div>
  <div class="col-xs-6 col-sm-3">
    <div class="pane-area">.col-xs-6 .col-sm-3</div>
  </div>
  
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-3">
    <div class="pane-area">.col-xs-6 .col-sm-3</div>
  </div>
  <div class="col-xs-6 col-sm-3">
    <div class="pane-area">.col-xs-6 .col-sm-3</div>
  </div>
</div>

Offsetting columns ​

Code:

html
<div class="row">
  <div class="col-md-4">
    <div class="pane-area">.col-md-4</div>
  </div>
  <div class="col-md-4 col-md-offset-4">
    <div class="pane-area">.col-md-4 .col-md-offset-4</div>
  </div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">
    <div class="pane-area">.col-md-3 .col-md-offset-3</div>
  </div>
  <div class="col-md-3 col-md-offset-3">
    <div class="pane-area">.col-md-3 .col-md-offset-3</div>
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <div class="pane-area">.col-md-6 .col-md-offset-3</div>
  </div>
</div>

Nesting columns ​

Code:

html
<div class="row">
  <div class="col-sm-9">
    <div class="pane-area"> Level 1: .col-sm-9
      <div class="row">
        <div class="col-xs-8 col-sm-6">
          <div class="pane-area"> Level 2: .col-xs-8 .col-sm-6</div>
        </div>
        <div class="col-xs-4 col-sm-6">
          <div class="pane-area"> Level 2: .col-xs-4 .col-sm-6</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="row">
      <div class="pane-area"> Level 1: .col-sm-3</div>
    </div>
  </div>
</div>

Column ordering ​

Code:

html
<div class="row">
  <div class="col-md-9 col-md-push-3">
    <div class="pane-area">.col-md-9 .col-md-push-3</div>
  </div>
  <div class="col-md-3 col-md-pull-9">
    <div class="pane-area">.col-md-3 .col-md-pull-9</div>
  </div>
</div>