twitter bootstrap: align element to bottom

Question

I have a three column layout, in each of them I have a button that I'd like to be at the bottom, at the same height in every column, like this:

  col1 header       col2 header       col3 header  
content content   content content   content content
content content   content content   content content
content content   content content   content content
content content                     content content
content content                     content content
                                    content content
                                    content content

   <button>          <button>          <button>    

I want the three buttons to be aligned at the bottom, according to the column with the longest content.

My html looks like this:

<div class="col-md-4">
  <h2>col1 header</h2>
  <p>content [...]</p>
  <p class="text-center">
    <a href="#" class="btn btn-primary">button</a>
  </p>
</div>
<div class="col-md-4">
  <h2>col1 header</h2>
  <p>content [...]</p>
  <p class="text-center">
    <a href="#" class="btn btn-primary">button</a>
  </p>
</div>
<div class="col-md-4">
  <h2>col1 header</h2>
  <p>content [...]</p>
  <p class="text-center">
    <a href="#" class="btn btn-primary">button</a>
  </p>
</div>

More over this is responsive, so when the display si to narrow every column just appears one below the other.

Can anyone provide me some tip?

-- have a look at this related question: Bootstrap: align elements to bottom of column

and the solution I found: http://www.bootply.com/mSxIMFgHSi#

Answer 1

Solved It

---

version 1 - using only css

try using display: table, table-cell, and table-row

only css demo

only css fullscreen

css

    .wrapper {
        display:table;
        border-collapse:collapse;
    }
    .wrap {
        display:table-row;
    }
    .item {
        display:table-cell;
        border: 1px solid #ccc;
        padding-bottom:50px;
        position:relative;
    }
    a.btn{
        position:absolute;
        bottom:10px;
        left:40%;
    }

---

See this explaination(save this image if it is not readable)

---

Reference Blogs

• Equal height boxes with CSS
• Fluid Width Equal Height Columns

---

---

version 2 using jquery

You can do it using little jQuery

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

jQuery Demo

jQuery Fulscreen