8

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/

2
  • Why do you create two columns? Why not have two rows with a col-md-12 in both? Not understanding what you want the final product to look like.
    – Lowkase
    Feb 7, 2014 at 14:42
  • I want the two sections to be side-to-side, not one on top of another. But I want them to be bottom aligned. Feb 7, 2014 at 14:48

6 Answers 6

10

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/

4
  • You need to add padding-bottom to .mainBox element, to prevent content overlapping also.
    – Eternal1
    Feb 7, 2014 at 14:42
  • 3
    This will take the column out of the flow, so be careful if you include additional columns in this row.
    – Dismissile
    Feb 7, 2014 at 14:42
  • I think @Dismissile might have hit my issue on the head - this seems to work in the Fiddle but not in my actual code. I will play around and either get it to work or clarify the demo. Feb 7, 2014 at 14:47
  • Yeah the position: absolute was the key, although needing position: relative on the parent is what was tripping me up. Feb 7, 2014 at 18:42
10

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!

2

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/

1
  • If you want to maintain col-12 behavior while also using this method, you'll need to use media queries to override behavior. Aug 3, 2015 at 14:46
2

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.

1

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

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

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.