4

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.

DaniP
  • 37,813
  • 8
  • 65
  • 74
fightstarr20
  • 11,682
  • 40
  • 154
  • 278
  • For the height part, check out this question: http://stackoverflow.com/questions/19484544/set-height-of-div-to-height-of-another-div-through-css – Rvervuurt Nov 13 '14 at 14:30

1 Answers1

6

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

DaniP
  • 37,813
  • 8
  • 65
  • 74
  • I know this is a very old question.. Going by you answer the responsiveness of the grid is lost. If that is the case why use the grid in the 1st place ? – pravin Oct 28 '16 at 10:51
  • Hi @pravin you have a valid point I think OP can answer this better..... But I guess the use of the class names for the grid like the `col-xs-6` gives you some other properties you keep like the `width -- padding -- position` inherited from bootstrap css – DaniP Oct 28 '16 at 13:47