3

Making bootstrap's column the same height has already been answered here:

How can I make Bootstrap columns all the same height?

However I have a bit of a different requirement.

Specifically, I need a column's height to be limited to the height of a specific column.

For example, if we have 2 columns (100px, 50px) respectively, I want my first column to have height of 50px too which I'm going to be using (overflow:hidden) in. (Note that the heights are dynamic, but I always want to use the first column's height)

Is this possible with pure css? or do I have to use javascript to accomplish this?

Community
  • 1
  • 1
Secret
  • 3,291
  • 3
  • 32
  • 50

1 Answers1

-2

Sure, why not just limit the height using a special CSS class like this..

.row.limit [class*="col-"]{
  max-height:50px;
  overflow:hidden;
}

http://bootply.com/3LIJcG0SBe

If you don't need to apply the class to all Bootstrap columns (col-*) it would be better to apply a specific CSS selector. Then add limit to the approprite columns...

.limit {
  max-height:50px;
  overflow:hidden;
}
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    The height of the column is dynamic. Sorry if it was unclear from the original question! – Secret Feb 16 '15 at 15:33
  • You can use data attributes for your dinamic CSS. Take a look into this link: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes – Richard Cotrina Feb 16 '15 at 15:35