How to make Bootstrap columns act like table cells

Question

I'm trying to make my bootstrap columns act like td s, or find some other way for them to have equal height and vertically centered text. I've tried doing the display:table-cell hack but to no success. What am I doing wrong below?

Fiddle: https://jsfiddle.net/DTcHh/18560/

<div class="row like-table-row">
  <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10">
      <p>
         Here's some text that will surely be long enough to go onto another line if I make it thiiiiiiiiiiiiiiiiiiiiiiiiiisssssssssssssssssssssssss long
      </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Here's some shorter text
       </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Blah     
       </p>
  </div>
</div>
<div class="row like-table-row">
  <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10">
      <p>
         Here's some text
      </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Here's some shorter text
       </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Blah     
       </p>
  </div>
</div>

---

@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 > div { display: table-cell; vertical-align: middle; border: 1px solid #000; }

Answer 1

You're doing everything right except removing the float , (If you don't remove the float, it breaks the table layout.)

.row.like-table-row {
    display: table-row;
}

.row.like-table.row > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #000;
    float:none;
}

This should work just fine.

PS I used to use this technique a lot, but have stopped ever since the advent of Flexbox .

Answer 2

Correct method is to use .row as table and .col-* as table-cell .

.like-table {
    display: table;
    width: 100%;
}

.like-table > [class*=col-] {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

I have updated your fiddle to working demo. https://jsfiddle.net/rhythm19/DTcHh/33195/

Answer 3

You have a typo in class name: .row.like-table-row > div. Now go ahead and remove floats to get the divs vertically centred. I updated your fiddle as well: https://jsfiddle.net/vikasbaru/DTcHh/18566/

  .row.like-table-row > div { display: table-cell; vertical-align: middle; border: 1px solid #000; float: none; }

Answer 4

To use vertical align you need a container that will have the vertical align property and an inner element to be aligned.

Basically you need three css rules:

.vertical-align {
  height: 150px; /* Height is important or it won't work */
  display: table-cell; /* We will give our div table cell property */
  vertical-align: middle; /* This will do the trick to center vertically inner element */
}

So your html will look like:

<div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
  <div class="vertical-align">
    <p>Foo bar</p>
  </div>
</div>

Your example on jsfiddle: https://jsfiddle.net/mb3kyzgp/1/

If you need dynamic height, i suggest using jQuery to calculate tallest element, or you can set a height you think you won't reach (fast and easy but not the best).