From 6273604601c58284f49b38ae4e52533b9689437c Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 7 Dec 2013 20:52:51 -0800
Subject: Add .container-fluid variation for full-width containers and layouts

/cc #10711 #9862
---
 css.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'css.html')

diff --git a/css.html b/css.html
index 561ffe448..321042a77 100644
--- a/css.html
+++ b/css.html
@@ -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>
@@ -249,6 +249,16 @@ base_url: "../"
   <div class="col-md-6">.col-md-6</div>
   <div class="col-md-6">.col-md-6</div>
 </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>
-- 
cgit v1.2.3