Vertically Centered Bootstrap Grid

by jorgeluis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row v-centered">

    <div class="col-sm-4">
        <img class="img-responsive" src="http://placehold.it/400x300" alt="">
    </div>
    
    <div class="col-sm-8">
        
            <h2>
                Centered content
            </h2>
            <p>
                Some body copy and whatnot
            </p>
        
    </div>

</div>

CSS

@media (min-width: 480px) {
    

    .v-centered {
        display: table;
        width: 100%;
    }
    .v-centered div[class^="col-"] {
       display: table-cell;
       vertical-align: middle;
       float: none;
    }
    
}