21 merge requests!7033Fix backdrop undefined bug in modal,!8635ignore Gruntfile.js in jekyll,!8339Fix broken links to navbar component in docs examples,!7329Fix for issue #7328,!7219Fix for mini typo mistake in css.html,!7674Clear float on all when navbar is collapsed - v3,!7344Fixed .spanX selector (*= instead of ^=),!7346Fix compilation error,!7775added some tests for tooltip title setter,!8157Close Me: Docs "Customize and Download" button fix,!7509Proposed fix for allowing Collapse events ('show'/'hide') to be cancelled,!7964commit fixes #7792,!8656Added rel="stylesheet" to CDN-Examples,!8527Inner properties move 1,!8245Interactive color picker - Closed: request against wrong branch,!7865Patch 2,!7651Drop the sizzle dependency to allow smaller builds targeting mobile devices,!6853typeahead: do not store item data in an attribute,!6666Patch 1,!65463.0.0 wip - fixed the issue in which the test pid isn't killed if a test fails,!6503control markup changes added
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
<p>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.</p>
<divclass="bs-docs-grid">
<divclass="row-fluid show-grid">
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span4">4</div>
<divclass="span4">4</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span8">8</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span6">6</div>
<divclass="span6">6</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span12">12</div>
</div>
</div>
<h3>Basic fluid grid HTML</h3>
<p>Make any row "fluid" by changing <code>.row</code> to <code>.row-fluid</code>. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.</p>
<preclass="prettyprint linenums">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</pre>
<h2>Fluid offsetting</h2>
<p>Operates the same way as the fixed grid system offsetting: add <code>.offset*</code> to any column to offset by that many columns.</p>
<divclass="bs-docs-grid">
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<divclass="row-fluid show-grid">
<divclass="span3 offset3">3 offset 3</div>
<divclass="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<divclass="row-fluid show-grid">
<divclass="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
<preclass="prettyprint linenums">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset2">...</div>
</div>
</pre>
<h2>Fluid nesting</h2>
<p>Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.</p>
<p>{{_i}}To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}</p>
<p>{{_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}}</p>
<divclass="bs-docs-grid">
<divclass="row-fluid show-grid">
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span4">4</div>
<divclass="span4">4</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span8">8</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span6">6</div>
<divclass="span6">6</div>
</div>
<divclass="row-fluid show-grid">
<divclass="span12">12</div>
</div>
</div>
<h3>{{_i}}Basic fluid grid HTML{{/i}}</h3>
<p>{{_i}}Make any row "fluid" by changing <code>.row</code> to <code>.row-fluid</code>. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}</p>
<preclass="prettyprint linenums">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</pre>
<h2>{{_i}}Fluid offsetting{{/i}}</h2>
<p>{{_i}}Operates the same way as the fixed grid system offsetting: add <code>.offset*</code> to any column to offset by that many columns.{{/i}}</p>
<divclass="bs-docs-grid">
<divclass="row-fluid show-grid">
<divclass="span4">4</div>
<divclass="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<divclass="row-fluid show-grid">
<divclass="span3 offset3">3 offset 3</div>
<divclass="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<divclass="row-fluid show-grid">
<divclass="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
<preclass="prettyprint linenums">
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset2">...</div>
</div>
</pre>
<h2>{{_i}}Fluid nesting{{/i}}</h2>
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}</p>
