css - Input widths on Bootstrap 3

Question

Update again: I am closing this question by selecting the top answer to keep people from adding answers without really understanding the question. In reality there is no way to do it with the build in functionality without using grid or adding extra css. Grids do not work well if you are dealing with help-block elements that need to go beyond a short input for example but they are 'build-in'. If that is an issue I recommend using extra css classes which you can find in the BS3 discussion here. Now that BS4 is out it is possible to use the included sizing styles to manage this so this is not going to be relevant for much longer. Thanks all for good input on this popular SO question.

Update: This question remains open because it is about built-in functionality in BS to manage input width without resorting to grid (sometimes they have to be managed independently). I already use custom classes to manage this so this is not a how-to on basic css. The task is in BS feature discussion list and has yet to be addressed.

Original Question: Anyone figure out a way to manage input width on BS 3? I'm currently using some custom classes to add that functionality but I may have missed some non documented options.

Current docs say to use .col-lg-x but that clearly doesn't work as it can only be applied to the container div which then causes all kinds of layout/float issues.

Here's a fiddle. Weird is that on the fiddle I can't even get the form-group to resize.

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

Answer 1

What you want to do is certainly achievable.

What you want is to wrap each 'group' in a row, not the whole form with just one row. Here:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

The NEW jsfiddle I made: NEW jsfiddle

Note that in the new fiddle, I've also added 'col-xs-5' so you can see it in smaller screens too - removing them makes no difference. But keep in mind in your original classes, you are only using 'col-lg-1'. That means if the screen width is smaller than the 'lg' media query size, then the default block behaviour is used. Basically by only applying 'col-lg-1', the logic you're employing is:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

See Bootstrap 3 grid system for more info. I hope I was clear otherwise let me know and I'd elaborate.