0

So I'm using Bootstrap's grids to create (particularly here) a description of some variable T and a slider corresponding to it. The problem is that these two guys are not vertically aligned by default (see here).

I wonder if I could fix this without majorly affecting grids (to make it look cozy in mobile version as well). The best option would be the solution using some Bootsrap classes (without using fixed pixel-size).

P.S. Just in case if it's important, I'm using jQuery UI Slider Pips for my .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 the following code for a parent is not an option.

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

It helps with a fixed positioning of div's, but instead disables Bootstrap's grid transitioning from col-sm-* to 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 anyone can advice something else I would be very grateful. = )

UPD. I found a solution here. Not exactly what I wanted, but at least the functionality does not suffer. Here is the class for children div's:

.vcenter {
   display: inline-block;
   vertical-align: middle;
   float: none;
}
Community
  • 1
  • 1
hayk
  • 388
  • 1
  • 5
  • 20

3 Answers3

0

<div class="row">  
  <div class="col-sm-2 text-right">
    <h4>T <small>Some Description</small></h4>
  </div>
  <div class="col-sm-10">
    <div class="slider"></div>
  </div>
</div>

What you did was add a line break into the line. Was that what you were going for?

Chase
  • 151
  • 8
  • That doesn't matter. "br" just adds space to the first (child) "div" and has nothing to do with the alignment. – hayk May 11 '15 at 17:09
0

Have you tried display property flex ?

you can assign following properties to parent.

display: flex;
align-items: center;

Though this is not using bootstrap classes, it would be not spoil the responsiveness.

Ramesh
  • 1,287
  • 1
  • 9
  • 14
  • Actually, it does affect on boostrap functionality, so the question is still open. See UPD. – hayk May 12 '15 at 11:30
  • can you elaborate on how it effected ? – Ramesh May 12 '15 at 11:37
  • I wrote in UPD, but in a couple of words... On large screens I have my two _div_'s together with _col-sm-3_ and _col-sm-9_. When transiting to _xs_ I want to position them above each other, with _col-xs-12_ on both _div_'s. This doesn't work because of _display: flex_. – hayk May 12 '15 at 11:43
0

I would define a height for those divs, then set a media query to remove that defined height when it reaches the particular bootstrap breakpoint.

Goose
  • 4,764
  • 5
  • 45
  • 84