title: How to make Bootstrap columns act like table cells
body: <p>I'm trying to make my bootstrap columns act like <code>td</code>s, or find some other way for them to have equal height and vertically centered text. I've tried doing the <code>display:table-cell</code> hack but to no success. What am I doing wrong below?</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/DTcHh/18560/" rel="noreferrer">https://jsfiddle.net/DTcHh/18560/</a></p>
  
  <pre><code>&lt;div class="row like-table-row"&gt;
    &lt;div class="col-xs-8 col-sm-10 col-md-10 col-lg-10"&gt;
        &lt;p&gt;
           Here's some text that will surely be long enough to go onto another line if I make it thiiiiiiiiiiiiiiiiiiiiiiiiiisssssssssssssssssssssssss long
        &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-2 col-sm-1 col-md-1 col-lg-1"&gt;
         &lt;p&gt;
             Here's some shorter text
         &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-2 col-sm-1 col-md-1 col-lg-1"&gt;
         &lt;p&gt;
             Blah     
         &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row like-table-row"&gt;
    &lt;div class="col-xs-8 col-sm-10 col-md-10 col-lg-10"&gt;
        &lt;p&gt;
           Here's some text
        &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-2 col-sm-1 col-md-1 col-lg-1"&gt;
         &lt;p&gt;
             Here's some shorter text
         &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-2 col-sm-1 col-md-1 col-lg-1"&gt;
         &lt;p&gt;
             Blah     
         &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
  
  .row.like-table-row { display: table-row; }
    .row.like-table.row &gt; div { display: table-cell; vertical-align: middle; border: 1px solid #000; }
  </code></pre>