The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

4
4 offset 4
3 offset 3
3 offset 3
6 offset 6
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset2">...</div>
</div>

Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.

Fluid 12
Fluid 6
Fluid 6
Fluid 6
Fluid 6
<div class="row-fluid">
<div class="span12">
Fluid 12
<div class="row-fluid">
  <div class="span6">
    Fluid 6
    <div class="row-fluid">
      <div class="span6">Fluid 6</div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
  <div class="span6">Fluid 6</div>
</div>
</div>
</div>