126

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:

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

Here's what I want:

-row-fluid-------------------------------------
+-span6----------+
|                |
| 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:

http://jsfiddle.net/ryansturmer/A7buv/3/

3

10 Answers 10

69

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

http://jsfiddle.net/silb3r/0srp42pb/11/

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.

9
  • I want to keep it at middle. However in your jsfiddle when i tried "vertical-allign:middle" then it didn't work. Any thoughts?
    – joy
    Mar 8, 2015 at 3:31
  • Try setting both divs to vertical-align: middle;.
    – cfx
    Mar 8, 2015 at 3:37
  • 6
    This is the only acceptable answer! @Lukas's will ignore widths on columns that don't fill a row. And DOM manipulation for styling... SMH.
    – Archonic
    May 30, 2015 at 3:59
  • Your CSS is keyed off the row (specifically, .myrow)...doesn't this mean you can't have one column top-aligned, one column bottom-aligned, and a third column top-aligned? Jun 2, 2015 at 14:37
  • Thanks ! Works fine with Bootstrap 4. Jan 27, 2016 at 9:14
49

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)
6
  • 3
    for responsiveness, perhaps hook the window.resize? stackoverflow.com/a/2969091/244811 Jan 15, 2013 at 4:46
  • 25
    Don't use a jQuery solution for something that could be a CSS solution. There's many reasons to avoid DOM manipulation for styling purposes.
    – Archonic
    May 30, 2015 at 3:43
  • 1
    @Archonic : what is that CSS-only solution? I would also prefer it to a JS-dependent solution. Just keep in mind OP's stipulation: "a solution where I didn't have to specify the absolute height of my divs would be preferred" Jun 1, 2015 at 13:23
  • 1
    @cfx Posted a css only solution with a fiddle that doesn't require absolute heights.
    – Archonic
    Jun 2, 2015 at 3:37
  • 1
    On the other hand, my solution allows the user to bottom-align individual elements (giving similar behaviour to Bootstrap's .pull-left and .pull-right), without affecting siblings. Can that be done with CSS-only solution? Jun 2, 2015 at 14:38
36

You can use flex:

@media (min-width: 768px) {
  .row-fluid {
    display: flex;
    align-items: flex-end;
  }
}
6
  • Using felx is very nice and straightforward in my opinion and I had one more advantage using "align-items: baseline" that was great with differet fonts in the different items to align. Mar 12, 2016 at 17:05
  • Excellent suggestion to use flex. Simple, strait-forward, and uses Bootstrap to solve a Bootstrap problem. Sep 6, 2017 at 21:31
  • 1
    Brilliant answer and works perfectly with bootstrap with no javascript / jquery needed.
    – Filth
    Nov 8, 2017 at 12:37
  • 1
    Yup, add this to a regular bootstrap row and bam, it works. Beautiful. How a non-responsive, jquery solution became the top answer? We'll never know. Dec 14, 2017 at 18:51
  • @LeviFuller My guess is because this solution only supports one breakpoint
    – clamchoda
    Jul 16, 2019 at 21:07
27

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/

5
  • 4
    I would create a specific css class instead of setting it to span6, but the table-cell strategy works well! I also had to set "display: table-row" to the containing div to have correct widths. Jan 9, 2014 at 15:30
  • 3
    For Bootstrap 3 I added this rule: .row.align-bottom > [class^=col]{ display: table-cell; vertical-align: bottom; float: none; } apply align-bottom to the row <div class="row align-bottom">
    – Martin
    Aug 22, 2014 at 12:20
  • @Martin, your rule works fine when you also set .align-bottom { display: table-row;}, however, the row alignment is off because table rows don't respect the bootstrap margin-left and margin-right: -15px......thoughts?
    – Alex White
    Oct 28, 2014 at 19:23
  • @AlexWhite - Put padding-left: 0 and padding-right: 0 on all the cols in that row. Jan 27, 2015 at 20:42
  • 1
    This will ignore column widths when columns don't fill the width of a row. When using offsets for example.
    – Archonic
    May 30, 2015 at 4:00
14

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);
        }
      };
    }
0
7

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.

1
  • This should be the accepted answer: it's short, simple, and works in any browser that supports flex. The only drawback is it breaks responsiveness.
    – tbm
    Aug 7, 2017 at 14:27
5

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.

4

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: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
        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 () {
            fixHeader();
        });

        fixHeader();
    });
}(window.jQuery);
2
  • thanks for this refinement, I've just taken it for a current project and it's working well.
    – sifriday
    Aug 25, 2014 at 17:02
  • 1
    Why set margin-top to 0, then set it again to the new value? Also, why do these things in two each() "loops"? Mar 10, 2015 at 13:28
0

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   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------
1
  • 4
    How do you know the number of &nbsp; to add if the length of the left cell is unknown?
    – Gqqnbig
    Jan 17, 2017 at 23:36
-3
.align-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
1
  • 2
    you should try to add some info to your answer explaining why it answers the OP question
    – MLavoie
    Jul 9, 2016 at 1:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.