Twitter Bootstrap form: Make label column wider

Question

the question is about Twitter Bootstrap forms. Does anybody now what's the recommended way to get the left column (with the labels) wider than 140px? It's important that it also looks good on mobile devices.

Thanks for your recommendations.

Answer 1

In Bootstrap v2.1.1, the .control-label width is defined in forms.less like this:

.form-horizontal
{
    .control-label
    {
        width: @horizontalComponentOffset - 20;
    }
}

You could override the @horizontalComponentOffset variable definition in your project's LESS code after importing bootstrap's variables.less. If you need this for a specific page, do it in that page's LESS. Otherwise, add it a common import, or better yet, your own variables.less file that is intended to override Bootstrap's predefined variables.

As far as mobile goes, you can use media queries to give a different @horizontalComponentOffset value for mobile devices, if needed.