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

I elaborated a bit on zessx's answer, in order to make it easier to use when mixing different column sizes on different screen sizes.

If you use Sass, you can add this to your scss-file:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

Which generates the following CSS (that you can use directly in your stylesheets, if you are not using Sass):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

Now you can use it on your responsive columns like this:

    

        

            

                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            
        

            

                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            
        
    
    

        

            

                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            
        

            

                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.