diff options
Diffstat (limited to 'css.html')
| -rw-r--r-- | css.html | 12 |
1 files changed, 11 insertions, 1 deletions
@@ -76,7 +76,7 @@ base_url: "../" <h3 id="grid-intro">Introduction</h3> <p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p> <ul> - <li>Rows must be placed within a <code>.container</code> for proper alignment and padding.</li> + <li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width) for proper alignment and padding.</li> <li>Use rows to create horizontal groups of columns.</li> <li>Content should be placed within columns, and only columns may be immediate children of rows.</li> <li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.</li> @@ -251,6 +251,16 @@ base_url: "../" </div> {% endhighlight %} + <h3 id="grid-example-fluid">Example: Fluid container</h3> + <p>Turn any fixed-width grid layout into a full-width layout by changing your outermost <code>.container</code> to <code>.container-fluid</code>.</p> +{% highlight html %} +<div class="container-fluid"> + <div class="row"> + ... + </div> +</div> +{% endhighlight %} + <h3 id="grid-example-mixed">Example: Mobile and desktop</h3> <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p> <div class="bs-docs-grid"> |