title: bootstrap fill empty space with columns
body: <p>Im trying to simulate a grid using bootstrap, I have a slight problem with placing one of the columns.</p>
  
  <p>I have tried messing around with placement of the divs and offsets/pulls but with no luck.</p>
  
  <p>To clarify what I would like to achieve, in the middle column there should be three blocks of the same height, at the moment there is a gap in the middle. Columns should fill available space if possible. Similar to below (not to scale).</p>
  
  <p><a href="https://i.stack.imgur.com/Bwwfb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bwwfb.png" alt="enter image description here"></a></p>
  
  <p><a href="http://www.bootply.com/KeQzWKbzPG" rel="nofollow noreferrer">http://www.bootply.com/KeQzWKbzPG</a></p>
  
  <p>css</p>
  
  <pre><code>.grid-item--height2 { height: 202.5px; }
  .grid-item--height5 { height: 405px; }
  .grid-item--height7 { height: 607.5px; }
  .tile {border:2.5px solid white; }
  .blue-background {background-color:blue;}
  .orange-background {background-color:orange;}
  </code></pre>
  
  <p>html </p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="row-fluid"&gt;
        &lt;div class="col-md-5 grid-item--height2 blue-background tile text-center"&gt;
  
        &lt;/div&gt;
  
        &lt;div class="col-md-5 grid-item--height2 blue-background tile text-center"&gt;
  
        &lt;/div&gt; 
  
        &lt;div class="col-md-2 grid-item--height2 orange-background tile text-center"&gt;
  
        &lt;/div&gt;
  
        &lt;div class="col-md-4 grid-item--height7 blue-background tile text-center"&gt;
  
        &lt;/div&gt;
  
  
  
        &lt;div class="col-md-4 grid-item--height2 blue-background tile text-center"&gt;
  
        &lt;/div&gt;
  
  
        &lt;div class="col-md-4 grid-item--height5 blue-background tile text-center"&gt;
  
        &lt;/div&gt;
  
  
          &lt;div class="col-md-4 grid-item--height2 blue-background tile text-center"&gt;
  
        &lt;/div&gt;
  
        &lt;div class="col-md-4 grid-item--height2 blue-background tile text-center"&gt;
  
        &lt;/div&gt;
  
  
        &lt;div class="col-md-4 grid-item--height2 blue-background tile text-center "&gt;
  
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>