Making Columns Heights Even within A Row

Question

How can columns be controlled in bootstrap, to keep them all the same height, with varying length of text inside, keeping the text at the top?

Example of what I need:

Here is the markup so far:

<div class="row-same-height row-full-height">
<div class="col-xs-6 col-xs-height col-full-height warning"><div class="item"><div class="content "><h2>No cost, as long as you want the contents of the columns to be centered between the top and bottom</h2></div></div></div>
<div class="col-xs-3 col-xs-height col-full-height"><div class="item"><div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium facilisis volutpat. Pellentesque finibus diam nec commodo eleifend. Pellentesque varius felis ac metus vestibulum, id vestibulum mi congue. Vestibulum quis sem ultrices, pharetra est id, pretium neque. Maecenas pulvinar urna vel orci tincidunt, eu consequat magna efficitur. Maecenas commodo mi erat, id placerat ipsum dignissim at. Nunc sed laoreet lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer a sapien at dolor pulvinar pretium quis eget ligula.</div></div></div>
<div class="col-xs-2 col-xs-height col-full-height"><div class="item"><div class="content">Yes, really </div></div></div>
<div class="col-xs-1 col-xs-height col-full-height"><div class="item"><div class="content"></div></div></div>

</div>

Answer 1

You could use CSS3's flexbox model to accomplish this:

.row-same-height {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

http://jsfiddle.net/5vrutebn/

Answer 2

With this example you can get an idea of what you want to do:

/*CSS*/
#contenedor {
  display: table;
  width: 100%
}
#contenidos {
  display: table-row;
}
#columna1 {
  display: table-cell;
  background: #ccc;
  width: 20%;
}
#columna2 {
  display: table-cell;
  background: #666;
  width: 50%;
}
#columna3 {
  display: table-cell;
  background: #999;
  width: 20%;
}

<!--HTML-->
<div id="contenedor">
  <div id="contenidos">
    <div id="columna1">
    	<p>Texto</p>
    	<p>Texto</p>
    	<p>Texto</p>
    	<p>Texto</p>
    	<p>Texto</p>
    	<p>Texto</p>
    </div>
    <div id="columna2">Texto</div>
    <div id="columna3">Texto</div>
  </div>
</div>

Answer 3

You need javascript to accomplish this.

The javascript searches for the highest element in the row. And sizes everything accordingly.

http://codepen.io/micahgodbolt/pen/FgqLc

/* Thanks to CSS Tricks for pointing out this bit of jQuery http://css-tricks.com/equal-height-blocks-in-rows/ It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.main article');
});


$(window).resize(function(){
  equalheight('.main article');
});