How to align the slider bars on a panel using bootstrap?

Question

I have a control panel with 6 slider bars on it (implemented by bootstrap-slider), but those 6 slider bars seem to align differently with different window size: sometimes 4+2 and sometimes 2+2+2. I have no idea what a good-looking control panel is but I think mine is not elegant. I do not want them to drift "randomly", like this, what shall I do?

HTML:

<div class="container" id="appDiv">
  <div class="row">
    <div class="col" id="controlPanel">
      <div id="sliders">
        <!-- Slide bars -->
        <div class="row">
          <div class="slider col-sm-4">
            <label for="mySamples" class="slideLables">Samples \( N=2^q \)</label>
            <input id="mySamples" min="2" max="10" value="6" step="1" class="sliderBars">
            <span id="samplesSliderVal" class="sliderVal"></span>
          </div>

          <div class="slider col-sm-4">
            <label for="myPhase" class="slideLables">Phase \( \phi \)</label>
            <input id="myPhase" data-slider-min="-4.99" data-slider-max="4.99" data-slider-value="0" data-slider-step="0.01" class="sliderBars">
            <span id="phaseSliderVal" class="sliderVal"></span>
          </div>

          <div class="slider col-sm-4">
            <label for="b1" class="slideLables">Amplitude \( b_1 \)</label>
            <input id="b1" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars">
            <span id="b1SliderVal" class="sliderVal"></span>
          </div>
        </div>

        <div class="row">
          <div class="slider col-sm-4">
            <label for="b3" class="slideLables">Amplitude \( b_3 \)</label>
            <input id="b3" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars">
            <span id="b3SliderVal" class="sliderVal"></span>
          </div>

          <div class="slider col-sm-4">
            <label for="b5" class="slideLables">Amplitude \( b_5 \)</label>
            <input id="b5" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars">
            <span id="b5SliderVal" class="sliderVal"></span>
          </div>

          <div class="slider col-sm-4">
            <label for="b7" class="slideLables">Amplitude \( b_7 \)</label>
            <input id="b7" data-slider-min="0" data-slider-max="1" data-slider-value="0" data-slider-step="0.01" class="sliderBars">
            <span id="b7SliderVal" class="sliderVal"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

#appDiv {
  margin-top: 20px;
  background-image: linear-gradient(to bottom, rgb(193, 193, 193) 0px, rgb(210, 210, 210) 100%);
  text-align: center;
}

.slider {
  margin-top: 10px;
  margin-left: 15px;
}

.sliderBars {
  margin-left: 10px;
}

.sliderVal {
  width: 10px;
  margin-left: 10px;
}

JS:

var sampleSlider = $('#mySamples').bootstrapSlider({});
var phaseSlider = $('#myPhase').bootstrapSlider({});
var b1Slider = $('#b1').bootstrapSlider();
var b3Slider = $('#b3').bootstrapSlider();
var b5Slider = $('#b5').bootstrapSlider();
var b7Slider = $('#b7').bootstrapSlider();
var nSample = Math.pow(2, sampleSlider.bootstrapSlider('getValue'));
var phase = phaseSlider.bootstrapSlider('getValue');
var b1 = b1Slider.bootstrapSlider('getValue');
var b3 = b3Slider.bootstrapSlider('getValue');
var b5 = b5Slider.bootstrapSlider('getValue');
var b7 = b7Slider.bootstrapSlider('getValue');

// Interactive interfaces
sampleSlider.bootstrapSlider({
  formatter: function(value) {
    return Math.pow(2, value);
  }
});

sampleSlider.on('slideStop', function() {
  nSample = Math.pow(2, sampleSlider.bootstrapSlider('getValue')); // Change "global" value

  $('#samplesSliderVal').text(nSample)
});

phaseSlider.on('slideStop', function() {
  phase = phaseSlider.bootstrapSlider('getValue'); // Change "global" value

  $('#phaseSliderVal').text(phase)
});

b1Slider.on('slideStop', function() {
  b1 = b1Slider.bootstrapSlider('getValue'); // Change "global" value

  $('#b1SliderVal').text(b1)
});

b3Slider.on('slideStop', function() {
  b3 = b3Slider.bootstrapSlider('getValue'); // Change "global" value

  $('#b3SliderVal').text(b3)
});

b5Slider.on('slideStop', function() {
  b5 = b5Slider.bootstrapSlider('getValue'); // Change "global" value

  $('#b5SliderVal').text(b5)
});

b7Slider.on('slideStop', function() {
  b7 = b7Slider.bootstrapSlider('getValue'); // Change "global" value

  $('#b7SliderVal').text(b7)
});

$('#samplesSliderVal').text(nSample);
$('#phaseSliderVal').text(phase);
$('#b1SliderVal').text(b1);
$('#b3SliderVal').text(b3);
$('#b5SliderVal').text(b5);
$('#b7SliderVal').text(b7);

Edit

After I use komal's method, I still have other problems like this figure shows. I do not know why this cannot be reproduced in the updated jsfiddle, but it is really a problem. Besides, I also want to fix the positions of the texts in class sliderVal, i.e., they appear in the same line where the slider bars appear, rather than shown at another line when the window shrinks, like this.

Answer 1

Just remove class slider from divs and also remove second div class= row. here is the solution http://jsfiddle.net/et7pvqpj/37/