title: Split bootstrap column in n rows with equal height, filling parent height
body: <p>I'm quite new to Bootstrap, I'm struggling with the <code>grid</code> system while trying to reproduce the following template:</p>
  
  <p><img src="https://i.stack.imgur.com/oPyfq.png" alt="enter image description here"></p>
  
  <p>In this example I have 3 columns:</p>
  
  <ol>
  <li>first columns holds some info/pictures. This column holds a lot of data.</li>
  <li>second column holds 3 (but potentially n) contact info (email, address, phone number, ...)</li>
  <li>third column holds some random info</li>
  </ol>
  
  <p>I'd like to split the 2nd column into 3 rows, <strong>with equal height</strong>. What I need to do is to vertically center these 3 rows in the 2nd column, and possibly expand their heights to fill the parent (2nd column) height.</p>
  
  <p>This is an example of what I've achieved till now:</p>
  
  <pre><code>&lt;div class="row container"&gt;
    &lt;div class="col-md-4 first"&gt;
      &lt;p&gt; ... VERY LONG CONTENT ... &lt;/p&gt;&lt;/div&gt;
    &lt;div class="col-md-4 second"&gt;
      &lt;div class="row"&gt;
        Telephone number
      &lt;/div&gt;
      &lt;div class="row"&gt;
        Address
      &lt;/div&gt;
      &lt;div class="row"&gt;
        email
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4 third"&gt;
      Something else, vertically centered
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Find <a href="http://www.bootply.com/ZC5lCaUwFz" rel="noreferrer"><strong>here</strong></a> a bootply with my code</p>
  
  <p>As an alternative, instead of 3 subrows in the 2nd column, I would also be happy to use a <code>&lt;ul&gt;</code>.</p>
  
  <p>How can I do this? Is there any bootstrap class that I can apply to all 3 rows in order to have them fullfill the parent height?</p>
  
  <p>Thank you in advance</p>