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

HtmlCssLayoutTwitter Bootstrap

Html Problem Overview

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 second column just has a button and some text, which I want to bottom align relative to the cell in the first column.

Here's what I have:

+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |

Here's what I want:

|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+

I've seen solutions that make the first span an absolute height, and position the second span relative to it, but a solution where I didn't have to specify the absolute height of my divs would be preferred. I'm also open to a complete rethink of how to achieve the same effect. I'm not married to this use of the scaffolding, it just seemed to make the most sense to me.

This layout as a fiddle:

Html Solutions

Solution 1 - Html

This is an updated solution for Bootstrap 3 (should work for older versions though) that uses CSS/LESS only:

You set the font-size to 0 on the row (otherwise you'll end up with a pesky space between columns), then remove the column floats, set display to inline-block, re-set their font-size, and then vertical-align can be set to anything you need.

No jQuery required.

Solution 2 - Html

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 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...
  •'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)

Solution 3 - Html

You can use flex:

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

Solution 4 - Html

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:

Solution 5 - Html

Here's also an angularjs directive to implement this functionality

    pullDown: function() {
      return {
        restrict: 'A',
        link: function ($scope, iElement, iAttrs) {
          var $parent = iElement.parent();
          var $parentHeight = $parent.height();
          var height = iElement.height();
          iElement.css('margin-top', $parentHeight - height);

Solution 6 - Html

Just set the parent to display:flex; and the child to margin-top:auto. This will place the child content at the bottom of the parent element, assuming the parent element has a height greater than the child element.

There is no need to try and calculate a value for margin-top when you have a height on your parent element or another element greater than your child element of interest within your parent element.

Solution 7 - Html

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.

Solution 8 - Html

Based on the other answers here is an even more responsive version. I made changes from Ivan's version to support viewports <768px wide and to better support slow window resizes.

!function ($) { //ensure $ always references jQuery
    $(function () { //when dom has finished loading
        //make top text appear aligned to bottom:
        function fixHeader() {
            //for each element that is classed as 'pull-down'
            //reset margin-top for all pull down items
            $('.pull-down').each(function () {
                $(this).css('margin-top', 0);
            //set its margin-top to the difference between its own height and the height of its parent
            $('.pull-down').each(function () {
                if ($(window).innerWidth() >= 768) {
                    $(this).css('margin-top', $(this).parent().height() - $(this).height());

        $(window).resize(function () {


Solution 9 - Html

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:

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

Solution 10 - Html

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


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRyanView Question on Stackoverflow
Solution 1 - HtmlcfxView Answer on Stackoverflow
Solution 2 - HtmlJeromy FrenchView Answer on Stackoverflow
Solution 3 - HtmlChristopheView Answer on Stackoverflow
Solution 4 - HtmlLukasView Answer on Stackoverflow
Solution 5 - HtmlIlya SchukinView Answer on Stackoverflow
Solution 6 - HtmlzdebruineView Answer on Stackoverflow
Solution 7 - HtmlKirtlanderView Answer on Stackoverflow
Solution 8 - HtmlbbodenmillerView Answer on Stackoverflow
Solution 9 - Htmljan bView Answer on Stackoverflow
Solution 10 - HtmlDouglas RibeiroView Answer on Stackoverflow