Bootstrap 3: How do you align column content to bottom of row

Question

I have a row in Bootstrap 3 and 3 columns in that row. I want to align two of the columns to the bottom of the row and keep the first column at the top. When I use the traditional approach with position relative in the parent and absolute for both columns I get a weird behavior which I imagine is because of something in twitter bootstrap. Here's a bootply of what's happening:

http://www.bootply.com/125735

The absolute forces all the columns on top of eachother, can anyone help me out? The end result is to have something like so:

http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/

Thanks

possible duplicate of [How do I bottom-align grid elements in bootstrap fluid layout](http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout) — Marius Stănescu, Mar 28 '14 at 23:58
There you'll also find a better answer: http://stackoverflow.com/a/28200097/2199525 — leymannx, Jun 16 '16 at 19:18

score 42 · Answer 1 · edited May 23 '17 at 11:47

42

You can use display: table-cell and vertical-align: bottom, on the 2 columns that you want to be aligned bottom, like so:

.bottom-column
{
    float: none;
    display: table-cell;
    vertical-align: bottom;
}

Working example here.

Also, this might be a possible duplicate question.

edited May 23 '17 at 11:47

Community

1
1

answered Mar 28 '14 at 23:57

Marius Stănescu

3,603
2
35
49

Here is the browser support for *display: table-cell*: http://caniuse.com/#search=table-cell. I did not test this in other browsers, but I don't see why it wouldn't work. – Marius Stănescu Mar 11 '15 at 21:04
Thanks for the reply! I meant whether or not 'display: table-cell' universally ignores white space between the
's.
– jetlej Mar 11 '15 at 21:09
1

but you have to ensure display:table is set on the parent container, right? – Manticore Jun 13 '16 at 11:44
1

@Manticore yes, you have to set display: table on the parent element – Marius Stănescu Jun 13 '16 at 18:31
1

Nice solution :) thank you! To maintain the responsive qualities of Bootstrap, you may want to wrap this CSS in a media query like `@media (min-width: 992px)` – sqsinger Jun 21 '16 at 13:43

score 7 · Answer 2 · answered Mar 29 '14 at 00:02

Vertical align bottom and remove the float seems to work. I then had a margin issue, but the -2px keeps them from getting pushed down (and they still don't overlap)

.profile-header > div {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  margin: -2px;
}
.profile-header {
  margin-bottom:20px;
  border:2px solid green;
  display: table-cell;
}
.profile-pic {
  height:300px;
  border:2px solid red;
}
.profile-about {
  border:2px solid blue;
}
.profile-about2 {
  border:2px solid pink;
}

Example here: http://www.bootply.com/125740#

Just great! Had a hard morning with this! – toesslab Jul 14 '16 at 07:16 — toesslab, Jul 14 '16 at 07:16

Vlad Alivanov · Answer 3 · 2017-03-26T07:04:10.413

When working with bootsrap usually face three main problems:

How to place the content of the column to the bottom?
How to create a multi-row gallery of columns of equal height in one .row?
How to center columns horizontally if their total width is less than 12 and the remaining width is odd?

To solve first two problems download this small plugin https://github.com/codekipple/conformity

The third problem is solved here http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

Common code

<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>

1. Aligning content of the column to the bottom

<div class="row row-conformity">
    <div class="col-sm-3">
        I<br>create<br>highest<br>column
    </div>
    <div class="col-sm-3">
        <div class="to-bottom">
            I am on the bottom
        </div>
    </div>
</div>

2. Gallery of columns of equal height

<div class="row row-conformity">
    <div class="col-sm-4">We all have equal height</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
</div>

3. Horizontal alignment of columns to the center (less than 12 col units)

<div class="row row-centered">
    <div class="col-sm-3">...</div>
    <div class="col-sm-4">...</div>
</div>

All classes can work together

<div class="row row-conformity row-centered">
    ...
</div>

score 1 · Answer 4 · answered Mar 22 '17 at 10:18

I don't know why but for me the solution proposed by Marius Stanescu is breaking the specificity of col (a col-md-3 followed by a col-md-4 will take all of the twelve row)

I found another working solution :

.bottom-column 
{
   display: inline-block;
   vertical-align: middle;
   float: none;
}