CODEWITHSUNDEEP
csstwitter-bootstrap-3
John S
John S

Reputation: 8331

How do I specify row height in Bootstrap 3?

Using Bootstrap 3 I have styled the .row class to be a height of 3.5em. I have several inputs in the row. They align to the top of the row and I would like to get them bottom aligned.

I have tried a style of vertical-align:bottom but that does not seem to work. The reason I want to have things bottom aligned is that I have a floating label that I have popping up above the input field.

Any suggestion on how to accomplish a bottom align?

Upvotes: 2

Views: 4012

Answers (1)

Seb33300
Seb33300

Reputation: 7556

EDIT

Maybe i misunderstood what your want to do.

If you want to vertical align the content of your row, you can use that solution :

.row-bottom-align {
    display: table;
    table-layout: fixed;
}

.row-bottom-align > div {
    display: table-cell;
    float: none;
    vertical-align: bottom;
}

And add row-bottom-align to your row.

See it in action : http://jsfiddle.net/G5e3e/

======

ORIGINAL ANSWER

Here is a way to have your columns with the same height.

(you can also have the same render with the above solution by setting vertical align to "top", but here is another way to do that with margin/padding)

.row-same-height {
    overflow: hidden;
}

.row-same-height > div {
    margin-bottom: -2000px !important;
    padding-bottom: 2000px !important;
}

Just add row-same-height class to your row

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

Look it in action : http://jsfiddle.net/Cxa2m/

Upvotes: 3

Related Questions