<h1>Grid system <small>12 columns with a responsive twist</small></h1>
</div>
<h2>Default 940px grid</h2>
<divclass="row 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 show-grid">
<divclass="span4">4</div>
<divclass="span4">4</div>
<divclass="span4">4</div>
</div>
<divclass="row show-grid">
<divclass="span4">4</div>
<divclass="span8">8</div>
</div>
<divclass="row show-grid">
<divclass="span6">6</div>
<divclass="span6">6</div>
</div>
<divclass="row show-grid">
<divclass="span12">12</div>
</div>
<divclass="row">
<divclass="span4">
<p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
<p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p>
</div>
<divclass="span4">
<preclass="prettyprint linenums">
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</pre>
</div>
<divclass="span4">
<p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
</div>
</div><!-- /row -->
<h2>Offsetting columns</h2>
<divclass="row show-grid">
<divclass="span4">4</div>
<divclass="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<divclass="row show-grid">
<divclass="span3 offset3">3 offset 3</div>
<divclass="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<divclass="row show-grid">
<divclass="span8 offset4">8 offset 4</div>
</div><!-- /row -->
<br>
<h2>Nesting columns</h2>
<divclass="row">
<divclass="span6">
<p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
<h4>Example</h4>
<divclass="row show-grid">
<divclass="span6">
Level 1 of column
<divclass="row show-grid">
<divclass="span3">
Level 2
</div>
<divclass="span3">
Level 2
</div>
</div>
</div>
</div>
</div>
<divclass="span6">
<preclass="prettyprint linenums">
<div class="row">
<div class="span12">
Level 1 of column
<div class="row">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>
</pre>
</div>
</div>
<h2>Grid customization</h2>
<tableclass="zebra-striped">
<thead>
<tr>
<th>Variable</th>
<th>Default value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@gridColumns</code></td>
<td>16</td>
<td>The number of columns within the grid</td>
</tr>
<tr>
<td><code>@gridColumnWidth</code></td>
<td>40px</td>
<td>The width of each column within the grid</td>
</tr>
<tr>
<td><code>@gridGutterWidth</code></td>
<td>20px</td>
<td>The negative space between each column</td>
</tr>
<tr>
<td><code>@siteWidth</code></td>
<td><em>Computed sum of all columns and gutters</em></td>
<td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
</tr>
</tbody>
</table>
<divclass="row">
<divclass="span4">
<h3>Variables in LESS</h3>
<p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p>
</div>
<divclass="span4">
<h3>How to customize</h3>
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <ahref="#compiling">four ways documented to recompile</a>.</p>
</div>
<divclass="span4">
<h3>Staying responsive</h3>
<p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
<p><code><div class="fluid-container"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
<tableclass="zebra-striped">
<thead>
<tr>
<th>Label</th>
<th>Layout width</th>
<th>Column width</th>
<th>Gutter width</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smartphones</td>
<td>480px and below</td>
<tdclass="muted"colspan="2">Fluid columns, no fixed widths</td>
</tr>
<tr>
<td>Portrait tablets</td>
<td>480px to 768px</td>
<tdclass="muted"colspan="2">Fluid columns, no fixed widths</td>
</tr>
<tr>
<td>Landscape tablets</td>
<td>768px to 940px</td>
<td>44px</td>
<td>20px</td>
</tr>
<tr>
<td>Default</td>
<td>940px and up</td>
<td>60px</td>
<td>20px</td>
</tr>
<tr>
<td>Large display</td>
<td>1210px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
</tbody>
</table>
<h3>What they do</h3>
<p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
<ul>
<li>Modify the width of column in our grid</li>
<li>Stack elements instead of float wherever necessary</li>
<li>Resize headings and text to be more appropriate for devices</li>
</ul>
</div>
</div>
<br>
<!-- Media query code -->
<h2>Using the media queries</h2>
<divclass="row">
<divclass="span5">
<p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
<ol>
<li>Use the compiled responsive version, bootstrap.reponsive.css</li>
<li>Add @import "responsive.less" and recompile Bootstrap</li>
<li>Compile responsive.less as a separate file and include that</li>
</ol>
<p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
</div>
<divclass="span7">
<preclass="prettyprint linenums">
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (min-width: 480px) and (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 940px) { ... }
<pclass="pull-right"><ahref="#">Back to top</a></p>
<p>
Designed and built with all the love in the world <ahref="http://twitter.com/twitter"target="_blank">@twitter</a> by <ahref="http://twitter.com/mdo"target="_blank">@mdo</a> and <ahref="http://twitter.com/fat"target="_blank">@fat</a>.<br>
Code licensed under the <ahref="http://www.apache.org/licenses/LICENSE-2.0"target="_blank">Apache License v2.0</a>. Documentation licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</p>
</footer>
</div><!-- /container -->
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
