How do I bottom-align grid elements in bootstrap fluid layout

Question

I have a fluid layout using Twitter\'s bootstrap, wherein I have a row with two columns. The first column has a lot of content, which I want to fill the span normally. The

Answer 1

You can use flex:

@media (min-width: 768px) {
  .row-fluid {
    display: flex;
    align-items: flex-end;
  }
}

Answer 2

.align-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

Answer 3

This is based on cfx's solution, but rather than setting the font size to zero in the parent container to remove the inter-column spaces added because of the display: inline-block and having to reset them, I simply added

.row.row-align-bottom > div {
    float: none;
    display: inline-block;
    vertical-align: bottom;
    margin-right: -0.25em;
}

to the column divs to compensate.

Answer 4

Please note: for Bootstrap 4+ users, please consider Christophe's solution (Bootstrap 4 introduced flexbox, which provides for a more elegant CSS-only solution). The following will work for earlier versions of Bootstrap...

---

See http://jsfiddle.net/jhfrench/bAHfj/ for a working solution.

//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
  var $this = $(this);
  $this.css('margin-top', $this.parent().height() - $this.height())
});

On the plus side:

• in the spirit of Bootstrap's existing helper classes, I named the class pull-down.
• only the element that is getting "pulled down" needs to be classed, so...
• ...it's reusable for different element types (div, span, section, p, etc)
• it's fairly-well supported (all the major browsers support margin-top)

Now the bad news:

• it requires jQuery
• it's not, as-written, responsive (sorry)

Answer 5

You need to add some style for span6, smthg like that:

.row-fluid .span6 {
  display: table-cell;
  vertical-align: bottom;
  float: none;
}

and this is your fiddle: http://jsfiddle.net/sgB3T/

Answer 6

Well, I didn't like any of those answers, my solution of the same problem was to add this:<div>&nbsp;</div>. So in your scheme it would look like this (more or less), no style changes were necessary in my case:

-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
|                | | +---div---+       |
| content        | | | & nbsp; |       |
| that           | | +---------+       |
| is tall        | | +-----div--------+|   
|                | | |short content   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------