title: Strip full screen in fixed twitter bootstrap layout
body: <p>I would like to create this layout with twitter bootstrap. </p>
  
  <p><a href="http://i.stack.imgur.com/f6mn7.png" rel="nofollow">http://i.stack.imgur.com/f6mn7.png</a></p>
  
  <p>This my start Fiddle</p>
  
  <p><a href="http://jsfiddle.net/antoc/n8ec9j2h/" rel="nofollow">http://jsfiddle.net/antoc/n8ec9j2h/</a></p>
  
  <p>My html</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-4"&gt;
                  &lt;h3 class="bg-blue"&gt;title&lt;/h3&gt;
  
              &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-md-8"&gt;
                  &lt;h3 class="bg-red"&gt;title&lt;/h3&gt;
  
              &lt;p&gt;Lorem ipsum&lt;/p&gt;
               &lt;h3 class="bg-green"&gt;title&lt;/h3&gt;
  
              &lt;p&gt;Lorem ipsum&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My problems are: </p>
  
  <ol>
  <li>how to create the blu, red and green strip in css? </li>
  <li>how to create the yellow background in css?</li>
  </ol>