How to use vertical align in bootstrap

Question

Simple problem: How do I vertically align a col within a col using bootstrap? Example here (I want to vertically align child1a and child1b):

http://bootply.com/73666

HTML

<div class="col-lg-12">    <div class="col-lg-6 col-md-6 col-12 child1">     <div class="col-12 child1a">Child content 1a</div>     <div class="col-12 child1b">Child content 1b</div>    </div>     <div class="col-lg-6 col-md-6 col-12 child2">   Child content 2<br>   Child content 2<br>   Child content 2<br>   Child content 2<br>   Child content 2<br>    </div>  </div> 

UPDATE

Some CSS:

.col-lg-12{ top:40px; bottom:0px; border:4px solid green;   }    .child1a, .child1b{   border:4px solid black;   display:inline-block !important; }  .child1{   border:4px solid blue;   height:300px;   display:table-cell !important;   vertical-align:middle; }  .child2{   border:4px solid red; } 

Answer 1

.parent {     display: table;     table-layout: fixed; }  .child {     display:table-cell;     vertical-align:middle;     text-align:center; } 

table-layout: fixed prevents breaking the functionality of the col-* classes.

Answer 2

Maybe an old topic but if someone needs further help with this do the following for example (this puts the text in middle line of image if it has larger height then the text).

HTML:

<div class="row display-table">     <div class="col-xs-12 col-sm-4 display-cell">         img     </div>     <div class="col-xs-12 col-sm-8 display-cell">         text     </div> </div> 

CSS:

.display-table{     display: table;     table-layout: fixed; }  .display-cell{     display: table-cell;     vertical-align: middle;     float: none; } 

The important thing that I missed out on was "float: none;" since it got float left from bootstrap col attributes.

Cheers!