- - -

Live fluid grid example

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.

- -

Basic fluid grid HTML

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>
 -

- -

Fluid offsetting

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

4 offset 4

3 offset 3

6 offset 6

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

- -

Fluid nesting

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 -

 -<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>
 -

- -

diff --cc docs/templates/pages/scaffolding.mustache index 8da12d0a51,99bdb46f5e..6818bf459c --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@@ -159,7 -156,125 +159,6 @@@ - -

- - -

{{_i}}Live fluid grid example{{/i}}

{{_i}}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.{{/i}}

- -

{{_i}}Basic fluid grid HTML{{/i}}

{{_i}}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.{{/i}}

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

- -

{{_i}}Fluid offsetting{{/i}}

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

4 offset 4

3 offset 3

6 offset 6

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

- -

{{_i}}Fluid nesting{{/i}}

{{_i}}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.{{/i}}

- {{_i}}Fluid 12{{/i}} -

- {{_i}}Fluid 6{{/i}} -

 -<div class="row-fluid">
 -  <div class="span12">
 -    {{_i}}Fluid 12{{/i}}
 -    <div class="row-fluid">
 -      <div class="span6">
 -        {{_i}}Fluid 6{{/i}}
 -        <div class="row-fluid">
 -          <div class="span6">{{_i}}Fluid 6{{/i}}</div>
 -          <div class="span6">{{_i}}Fluid 6{{/i}}</div>
 -        </div>
 -      </div>
 -      <div class="span6">{{_i}}Fluid 6{{/i}}</div>
 -    </div>
 -  </div>
 -</div>
 -

- -

- - - --

diff --cc less/labels-badges.less index 02da1654d5,9c3a40bfbf..3ca0d6e200 --- a/less/labels-badges.less +++ b/less/labels-badges.less @@@ -24,9 -24,17 +24,17 @@@ .badge { padding-left: 9px; padding-right: 9px; - .border-radius(9px); + border-radius: 9px; } + // Empty labels/badges collapse + .label, + .badge { + &:empty { + display: none; + } + } + // Hover state, but only for links a { &.label:hover, diff --cc less/popovers.less index c4e84c0fd6,4a36db4e8d..256aa94514 --- a/less/popovers.less +++ b/less/popovers.less @@@ -17,9 -17,12 +17,12 @@@ background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.2); - .border-radius(6px); + border-radius: 6px; .box-shadow(0 5px 10px rgba(0,0,0,.2)); + // Overrides for proper insertion + white-space: normal; + // Offset the popover to account for the popover arrow &.top { margin-top: -10px; } &.right { margin-left: 10px; } diff --cc less/reset.less index e8e5c15892,aec4687638..d26b2a2ae9 --- a/less/reset.less +++ b/less/reset.less @@@ -133,3 -144,73 +133,73 @@@ textarea overflow: auto; // Remove vertical scrollbar in IE6-9 vertical-align: top; // Readability and alignment cross-browser } + + + // Printing + // ------------------------- + // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css + + @media print { + + * { + text-shadow: none !important; + color: #000 !important; // Black prints faster: h5bp.com/s + background: transparent !important; + box-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + // Don't show links for images, or javascript/internal links + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; // h5bp.com/t + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + @page { + margin: 0.5cm; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } -} ++}

Fluid grid system