jquery - Vertically aligning <div>'s within Bootstrap -

so i'm using bootstrap's grids create (particularly here) description of variable t , slider corresponding it. problem these 2 guys not vertically aligned default (see here).

i wonder if fix without majorly affecting grids (to make cozy in mobile version well). best option solution using bootsrap classes (without using fixed pixel-size).

p.s. just in case if it's important, i'm using jquery ui slider pips .slider.

<div class="row">     <div class="col-sm-2 text-right">     <h4>t<br> <small>some description</small></h4>   </div>   <div class="col-sm-10">     <div class="slider"></div>   </div> </div> 

upd. using following code parent not option.

.sliderparent {     display: flex;     align-items: center; } 

it helps fixed positioning of div's, instead disables bootstrap's grid transitioning col-sm-* col-xs-*

<div class="row sliderparent">   <div class="col-sm-3 col-xs-12">     ...   </div>   <div class="col-sm-9 col-xs-12">     ...   </div>  </div> 

so if can advice else grateful. = )

upd. found solution here. not wanted, @ least functionality not suffer. here class children div's:

.vcenter {    display: inline-block;    vertical-align: middle;    float: none; } 

have tried display property flex ?

you can assign following properties parent.

display: flex; align-items: center; 

though not using bootstrap classes, not spoil responsiveness.