Bootstrap 3 - 行内的底部对齐列

Question

I have two Bootstrap columns within a row, thusly:

<div class="row">
    <div class="col-xs-6 mainBox">
        <h1>Heading</h1>
        <h2>Sub Heading</h2>
    </div>
    <div class="col-xs-6 mainBox buttonBox">
        <button class="btn btn-primary">Button</button>
    </div>
</div>

I want the second column to be bottom aligned vertically within the row. How do I achieve this?

Here is a demo fiddle:
http://jsfiddle.net/RationalGeek/6pYhx/

Answer 1

Try using position: absolute; and setting a bottom of 0 :

.row {
    position: relative;
}
.mainBox {
    border: solid thin black;
}    
.buttonBox {
    position: absolute;
    bottom:0;
    right:0;
}

http://jsfiddle.net/6pYhx/3/

Answer 2

Although absolute position is a quick fix, a more robust solution that works with many columns would be much better.

Here is my solution in this updated fiddle .

[class*='cols-'].row > *{
  float: none;
  position: relative;
  display: inline-block; 
  /* old ie fixes */
  *zoom: 1; 
  *display: inline;
}

.row.cols-bottom > *{
  vertical-align: bottom;
}

.row.cols-middle > *{
  vertical-align: middle;
}

and html:

<div class="row cols-bottom">
    <div class="col-xs-4">
        <h3>Heading</h3>
        <h4>Sub Heading</h4>
    <!-- The lack of space between div tags below does MATTER -->
    </div><div class="col-xs-4">
        <button class="btn btn-primary">Button </button>
    <!-- The lack of space between div tags below does MATTER -->
    </div><div class='col-xs-4'>
        This col should be 3
    </div>
</div>

There are a couple of things to note in my solution. The inline-block strategy used allows positioning of the div columns to stay in the flow of the document, while also allowing the use of vertical-align styling. I've included a style for bottom alignment and middle alignment for you convenience (I tend to use the middle alignment just as often).

The second thing to note is you must have each of the respective ending-column </div> and starting-column <div> meet with no space in between. This is because inline-block gives 'space' to any character (including a space character). Essentially, it is because a space character has a given font-size, which ends up pushing the respective right most columns underneath the left most columns. There are hacks to overcome this, but they are note cross-browser compatible, so I did not include them. Therefore, my solution is hack-free, and works with multiple columns. Enjoy!

Answer 3

Building on Mike's solution, here's one that does not care about spaces between divs. Instead of inline it uses display:table and display:cell.

[class*='cols-'] {
   display:table;
}
[class*='cols-'] > * {
    float: none;
    position: relative;
    /* old ie fixes */
    *zoom: 1; 
    *display: inline;
    display: table-cell;
}
.cols-bottom > * {
        vertical-align: bottom;
}
.cols-top > * {
        vertical-align: top;
}

//extra bonus if needed
.p-top {
    vertical-align: top;
}

plunker updated: http://jsfiddle.net/6pYhx/325/

Answer 4

I know I'm posting on a very old thread, but I've been searching for solutions to the same issue. I think a simple solution may be to use display: flex; on the row, and margin-top: auto; on the column you want pushed down. Here's a demo fiddle based on the OP.

*Please note* - this is altering the row class which could have unintended side effects. You may want to implement it in a new class and only apply where needed.

Answer 5

Building on solutions from Mike and JPH, this allows for col-12 behavior to be retained. It isn't perfect and a bit verbose in plain CSS, but works.

/* Vertical Align Columns */
[class*='cols-'] {
   display:table;
}
.cols-bottom > * {
    vertical-align: bottom;
}
.cols-middle > * {
    vertical-align: middle;
}
.cols-top > * {
    vertical-align: top;
}

/* Resets for col-12 classes */
@media (min-width: 1200px) {
    [class*='cols-'] > *:not(.col-lg-12) {
        float: none;
        position: relative;
        /* old ie fixes */
        *zoom: 1; 
        *display: inline;
        display: table-cell;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    [class*='cols-'] > *:not(.col-lg-12):not(.col-md-12) {
        float: none;
        position: relative;
        /* old ie fixes */
        *zoom: 1; 
        *display: inline;
        display: table-cell;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    [class*='cols-'] > *:not(.col-lg-12):not(.col-md-12):not(.col-sm-12) {
        float: none;
        position: relative;
        /* old ie fixes */
        *zoom: 1; 
        *display: inline;
        display: table-cell;
    }
}
@media (max-width: 767px) {
    [class*='cols-'] > *:not(.col-lg-12):not(.col-md-12):not(.col-sm-12):not(.col-xs-12) {
        float: none;
        position: relative;
        /* old ie fixes */
        *zoom: 1; 
        *display: inline;
        display: table-cell;
    }
}

Answer 6

Here is another working example
http://jsfiddle.net/RationalGeek/6pYhx/

<div class="row row-eq-height"></div>

The Css:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}
.mainBox {
   border: solid thin black;
}

.buttonBox {
    vertical-align:center;
    margin-top: auto;
   margin-bottom: auto;
}