Twitter Bootstrap equal height columns and content aligned bottom

Question

i am using Twitter Bootstrap 3 for laying out a site and I need to achieve something specific. I have a two column layout with an image on the left and some text on the right...

<div class="row">
  <div class="col-xs-6">
      <img class="img-responsive" src="http://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col-xs-6">
      <p>
          This is some dummy content              
      </p>
  </div>
</div>

<style>    
.colright{background:green;color:white;}
</style>

http://jsfiddle.net/52VtD/9054/

I would like the text in the right hand column to be positioned at the bottom of the column, but I would also like the column to always be an equal height of the one on the left.

Answer 1

To get that layout you will need to break the float rules of bootstrap. Try this:

• Add a class on the row to later target the columns:

  <div class="row t-cell">
  

• Then with CSS use table-cell like this:

  .t-cell > div {
      display:table-cell;
      float:none;
      vertical-align:bottom;
  }
  

Check this DemoFiddle