Twitter Bootstrap form: Make label column wider

forms, twitter-bootstrap

Solution

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.

Problem

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.

Original source