Clever Geek Handbook

Twitter Boot column with equal height and bottom content level

I am using Twitter Bootstrap 3 to host a site and I need to achieve something specific. I have a two column layout with the image on the left and the 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 column to be placed at the bottom of the column, but I would also like the column to always be the same height as the one on the left.

+3


source to share


1 answer


To get this layout you will need to break the bootstrap rules float

. Try the following:

  • Add a class to the row to customize the columns later:

    <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

+6


source






More articles:


All Articles