title: Middle row height fit in twitter-bootstrap grid sytem
body: <p>I am shohel rana. I have been facing a problem since many days. I did not find any solution of my problem. </p>
  
  <p><strong>The problem is:</strong> </p>
  
  <blockquote>
    <p>I have three rows. The row one height will be fit according to their
    content height and the row three height will be fit according to their
    content height. But the row two will be fit according to rest of
    height.</p>
  </blockquote>
  
  <p>Here is my problem that is showing in picture below:</p>
  
  <p><img src="https://i.stack.imgur.com/4rOnw.png" alt="enter image description here"></p>
  
  <p>But I need the result look like this below:<br><br>
  <img src="https://i.stack.imgur.com/R6bpy.png" alt="enter image description here"></p>
  
  <p><strong><a href="http://plnkr.co/edit/BCPyZTF7WQAukEwwjQyD?p=preview" rel="nofollow noreferrer">HERE IS THE PLUNKER</a></strong></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /&gt;
    &lt;script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /&gt;
    &lt;script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row row-1"&gt;
        &lt;div class="col-md-4"&gt;ROW1 COLUMN1&lt;/div&gt;
        &lt;div class="col-md-4"&gt;ROW1 COLUMN2&lt;/div&gt;
        &lt;div class="col-md-4"&gt;Lorem ipsum dolor sit amet
  </code></pre>
  
  <p>Consectetur adipiscing elit
  Integer molestie lorem at massa
  Facilisis in pretium nisl aliquet
  Nulla volutpat aliquam velit
  Phasellus iaculis neque
  Purus sodales ultricies
  Vestibulum laoreet porttitor sem
  Ac tristique libero volutpat at
  Faucibus porta lacus fringilla vel
  Aenean sit amet erat nunc
  Eget porttitor lorem
          
          
            ROW2 COLUMN1
          
          
            ROW3 COLUMN1
            ROW3 COLUMN2
            Lorem ipsum dolor sit amet
  Consectetur adipiscing elit
  Integer molestie lorem at massa
  Facilisis in pretium nisl aliquet
  Nulla volutpat aliquam velit
  Phasellus iaculis neque
  Purus sodales ultricies
  Vestibulum laoreet porttitor sem
  Ac tristique libero volutpat at
  Faucibus porta lacus fringilla vel
  Aenean sit amet erat nunc
  Eget porttitor lorem
          
        
      </p>
  
  <pre><code>&lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>html,
  body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
  }
  .container-fluid {
    background-color: gray;
    height: 100%;
  }
  .row-1 {
    background-color: #b200ff;
    margin-bottom: 5px;
  }
  .row-1 &gt; .col-md-4 {
    background-color: #0094ff;
    border: 1px dashed #111010;
    text-align: center;
  }
  .row-2 {
    background-color: #b6ff00;
    margin-bottom: 5px;
  }
  .row-2 &gt; .col-md-12 {
    background-color: #ff6a00;
    border: 1px dashed #111010;
    text-align: center;
  }
  .row-3 {
    background-color: #00ff21;
  }
  .row-3 &gt; .col-md-4 {
    background-color: #00ffff;
    border: 1px dashed #111010;
    text-align: center;
  }
  </code></pre>
  
  <p><strong>Precaution:</strong></p>
  
  <ol>
  <li>Avoid display: table, table-row, and table-cell.</li>
  <li>Avoid JavaScript code.</li>
  </ol>