Bootstrap - forcing alignment of responsive elements

Question

I've got a couple of elements that I'm really struggling to align horizontally. I've got a JSFiddle example to try and illustrate it. The layout that I'm trying to achieve in particular is looking at the first/left most Email field.

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.

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.

Unfortunately I've found that I can't seem to use col classes on the toggle because this causes issues with the rendering of it.

EDIT

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 JSFiddle.

I would still prefer to use the first library if I can so bonus if I can solve the problem with the first library.

My HTML looks something like this:

<div id="settingsBar" class="">
    <div class="well bs-component col-sm-6">
        <form class="form-horizontal">
            <fieldset>
                <legend style="color: #ccc;">General</legend>
                <div class="form-group row">
                    <label for="txtBackColor" class="col-sm-12 col-md-3 col-lg-4 control-label">Background Colour</label>
                    <div class="col-sm-12 col-md-9 col-lg-8 row">
                        <div class="col-xs-1 col-sm-0"></div>
                        <input id="tglBackColor" type="checkbox" name="tglBackColor" class="bootstrap-toggle form-control" checked data-on-color="success" data-off-color="danger">
                        <input id="txtBackColor" type="text" class="colorPicker form-control col-xs-10 col-sm-7 col-md-10 col-lg-11" />
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

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.

Answer 1

Bootstrap has col- controls for different sizes.

You can control rendering of collumns by using proper classes, e.g.:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>

This means, collumn with such class will render over responsivity like 100% of container width (smartphones), 50% of container width (tablets), 33% of container width(small notebook/desktop screens) and 25% of container widht on high resolution displays.

You can also try put div with class="row" before your columns. Class row will cancel left and right padding of collumns. E.g.:

<div class="row">   
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
</div>

You can find more info about bootstrap basics here