Horizontal Form - Best way to set width of a control label?

Question

I'm new to twitter bootstrap and I'm working with a horizontal form. My code is something like this:

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="whatever">Whatever</label>
        <div class="controls">
            <select id="whatever" name="whatever">
                <option value="blah">Blah</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="another">Another</label>
        <div class="controls">
            <select id="something" name="something">
                <option value="MyEntry">MyEntry</option>
            </select>
        </div>
    </div>
    <button type="submit" class="btn">Search</button>
</form>

When I do this the form looks fine. The only problem is the length of the control-label is way too long so I get a lot of whitespace to the left of the labels. Is there a way to shorten the label so I don't get as much whitespace?

Thanks.

Answer 1

I did it by creating couple of extra form classes and use them depending on the size I need.

This is my css:

.form-small .control-label {
    width: 100px;
}

.form-small .controls {
    margin-left: 120px;
}

.form-medium .control-label {
    width: 180px;
}

.form-medium .controls {
    margin-left: 200px;
}

.form-xlarge .control-label {
    width: 240px;
}

.form-xlarge .controls {
    margin-left: 260px;
}

So if I need small label:

<form class="form-horizontal form-small">

<!-- form body -->

</form>

Of course you can setup your own .control-label and .controls widths according to your needs.

Hope that helps!