vertical-align with Bootstrap 3

Question

I\'m using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link:

Answer 1

If you are using the Less version of Bootstrap, and compiling into CSS yourself, you can use some utility classes to use with Bootstrap classes.

I've found these to work fantastically well where I want to preserve the responsiveness and configurability of the Bootstrap grid system (like using -md or -sm), but I want all columns in a given row to all have the same vertical height (so that I can then vertically align their content and have all columns in the row share a common middle).

CSS/Less:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

    

        ...
    
    

        ...