How to make bootstrap column height to 100 row height

Question

I haven t found a suitable solution to this and it seems so trivial   I have two columns inside a row    lt div class  row  gt     lt div class  col-xs-9  gt       lt div class  left-side  gt         lt p gt sdfsdf lt  p gt         lt p gt sdfsdf lt  p gt         lt p gt sdfsdf lt  p gt       lt  div gt     lt  div gt     lt div class  col-xs-3  gt       lt div class  something  gt asdfdf lt  div gt     lt  div gt   lt  div gt    The row height is set by the larger row  left-side  However  I want the right side s height to be the same   This seems intuitive  but it doesn t work   left-side       background-color  blue     something       height  100       background-color  red     row       background-color  green      http   jsfiddle net ccorcos jz8j247x

User · Accepted Answer

You can solve that using display table   Here is the updated JSFiddle that solves your problem   CSS   body       display  table      background-color  green      left-side       background-color  blue      float  none      display  table-cell      border  1px solid      right-side       background-color  red      float  none      display  table-cell      border  1px solid      HTML   lt div class  row body  gt           lt div class  col-xs-9 left-side  gt               lt p gt sdfsdf lt  p gt               lt p gt sdfsdf lt  p gt               lt p gt sdfsdf lt  p gt               lt p gt sdfsdf lt  p gt               lt p gt sdfsdf lt  p gt               lt p gt sdfsdf lt  p gt           lt  div gt           lt div class  col-xs-3 right-side  gt              asdfdf          lt  div gt       lt  div gt

User · Answer

Alan s answer will do what you re looking for  but this solution fails when you use the responsive capabilities of Bootstrap  In your case  you re using the xs sizes so you won t notice  but if you used anything else  e g  col-sm  col-md  etc   you d understand   Another approach is to play with margins and padding  See the updated fiddle  http   jsfiddle net jz8j247x 1    left-side     background-color  blue    padding-bottom  1000px    margin-bottom  -1000px    height  100      something     height  100     background-color  red    padding-bottom  1000px    margin-bottom  -1000px    height  100      row     background-color  green    overflow  hidden

[html] How to make bootstrap column height to 100% row height?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap