title: Bootstrap - forcing alignment of responsive elements
body: <p>I've got a couple of elements that I'm really struggling to align horizontally. I've got a <a href="http://jsfiddle.net/IPWright83/rNurL/" rel="nofollow noreferrer">JSFiddle example</a> to try and illustrate it. The layout that I'm trying to achieve in particular is looking at the first/left most Email field. </p>
  
  <p>I wish to have both the slider and input field aligned with the label if space, or both of them sitting below the label otherwise.</p>
  
  <p><img src="https://i.stack.imgur.com/tIWdA.png" alt="enter image description here"></p>
  
  <p>What I find however is that I end up with the controls wrapping, or large amounts of whitespace (or greyspace even) around the textbox - rather than it filling to take up the space.</p>
  
  <p>Unfortunately I've found that I can't seem to use <code>col</code> classes on the toggle because this causes issues with the rendering of it.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>So I've tried using a bootstrap library for my sliders instead in the hope that it'll allow for a better layout, and attempted to use bootstrap column sizing. This leaves me with the similar problems as you can see in the following <a href="http://jsfiddle.net/IPWright83/RXTGq/" rel="nofollow noreferrer">JSFiddle</a>.</p>
  
  <p>I would still <strong>prefer</strong> to use the first library if I can so bonus if I can solve the problem with the first library.</p>
  
  <p>My HTML looks something like this:</p>
  
  <pre><code>&lt;div id="settingsBar" class=""&gt;
      &lt;div class="well bs-component col-sm-6"&gt;
          &lt;form class="form-horizontal"&gt;
              &lt;fieldset&gt;
                  &lt;legend style="color: #ccc;"&gt;General&lt;/legend&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label for="txtBackColor" class="col-sm-12 col-md-3 col-lg-4 control-label"&gt;Background Colour&lt;/label&gt;
                      &lt;div class="col-sm-12 col-md-9 col-lg-8 row"&gt;
                          &lt;div class="col-xs-1 col-sm-0"&gt;&lt;/div&gt;
                          &lt;input id="tglBackColor" type="checkbox" name="tglBackColor" class="bootstrap-toggle form-control" checked data-on-color="success" data-off-color="danger"&gt;
                          &lt;input id="txtBackColor" type="text" class="colorPicker form-control col-xs-10 col-sm-7 col-md-10 col-lg-11" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/fieldset&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem I have is that depending on the size, the boxes overlap. What I want is for the final colour box to shrink down to fit on the same line, and the label sits either above or inline if there's enough space.</p>
  
  <p><img src="https://i.stack.imgur.com/LLrsY.png" alt="enter image description here"></p>