diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 5b636caa..5b576964 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -396,6 +396,7 @@ hr.soften {
   width: 100%;
 }
 
+
 /* Popover docs
 -------------------------------------------------- */
 .popover-well {
@@ -902,11 +903,6 @@ form.well {
     border-top-width: 0px;
     padding: 0;
   }
-  
-  /* Space out the show-grid examples */
-  .row-desktop.show-grid [class*="span"] {
-    margin-bottom: 5px;
-  }
 }
 
 
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 88973aed..5e9a2bfb 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -67,6 +67,10 @@
       <h3><a href="./components.html#alerts">{{_i}}Page alerts{{/i}}</a></h3>
       <p>{{_i}}Know those nice little alerts after you save your profile? With .page-alert the alert will be shown on top op your page.{{/i}}</p>
     </div>
+    <div class="span3">
+      <h3><a href="./scaffolding.html#layouts">{{_i}}Semi-fluid layout{{/i}}</a></h3>
+      <p>{{_i}}Get the best of both worlds with a semi-fluid layout. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.{{/i}}</p>
+    </div>
   </div>
   <div class="row">
     <div class="span3">
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 1088cc77..b7e3f6b3 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -358,6 +358,28 @@
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
+</pre>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+
+  <div class="row">
+    <div class="span6">
+      <h2>{{_i}}Semi-fluid layout{{/i}}</h2>
+      <p>{{_i}}Get the best of both worlds with <code>&lt;div class="container-semifluid"&gt;</code>. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.{{/i}}</p>
+      <div class="semifluid-layouts">
+          <div class="mini-layout desktop">
+            <div class="mini-layout-body"></div>
+          </div>
+          <div class="mini-layout tablet">
+            <div class="mini-layout-body"></div>
+          </div>
+      </div>
+<pre class="prettyprint linenums">
+&lt;div class="container-fluid"&gt;
+  &lt;div class="row-fluid"&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
 </pre>
     </div><!-- /.span -->
   </div><!-- /.row -->
@@ -547,7 +569,7 @@
     </div><!-- /.span -->
   </div><!-- /.row -->
 
-
+      
   <div class="row">
     <div class="span4">
     </div><!-- /.span -->
diff --git a/less/jasny/bootstrap.less b/less/jasny/bootstrap.less
index 984ee594..1991d8dc 100644
--- a/less/jasny/bootstrap.less
+++ b/less/jasny/bootstrap.less
@@ -12,6 +12,9 @@
 @import "../variables.less"; // Modify this for custom colors, font-sizes, etc
 @import "../mixins.less";
 
+// Grid system and page structure
+@import "layouts-semifluid.less";
+
 // Base CSS
 @import "forms.less";
 @import "forms-uneditable.less";
diff --git a/less/jasny/responsive.less b/less/jasny/responsive.less
index 6adedb91..3abd9df2 100644
--- a/less/jasny/responsive.less
+++ b/less/jasny/responsive.less
@@ -12,6 +12,9 @@
 @import "../variables.less"; // Modify this for custom colors, font-sizes, etc
 @import "../mixins.less";
 
+// Grid system and page structure
+@import "layouts-semifluid.responsive.less";
+
 // Base CSS
 @import "forms.responsive.less";