Twitter bootstrap: Input fields taking up too much space when page size is reduced

Question

Here's a jsfiddle http://jsfiddle.net/R5TB2/

code is in the fiddle :)

Whenever the page size gets reduced so that the input fields get put below the labels, the input fields get immensly large! I might have some serious bootstrap knowledge gaps here, but I can't, for the life of me, see what's causing this!

Any suggestions? I've tried all the margin: 0 auto etc., and it didn't work. And I'd like to get this to work without any 'hacks' ^^

Thanks!

Answer 1

I suggest you read up on how bootstrap grid layout works.

Your problem is this, col-md-5

As soon as your screen is below this md size, the bootstrap class doesn't apply, and thus the width resorts to it's default size, auto, which stretches it to fit it's parent container.

You should be using xs

Answer 2

Fiddle : http://jsfiddle.net/R5TB2/1/

You have to change the BT class :

col-md-* to col-xs-*

Extract : Change

<label class="col-md-5 control-label" for="username">Username:</label>
    <div class="col-md-2">
        <input id="username" class="form-control" type="text" placeholder="Username.." />
    </div>

to

<label class="col-xs-5 control-label" for="username">Username:</label>
    <div class="col-xs-2">
        <input id="username" class="form-control" type="text" placeholder="Username.." />
    </div>

Here is the doc : http://getbootstrap.com/css/#grid

UPDATE AFTER COMMENT

Look this fiddle : http://jsfiddle.net/9URh5/

You can add class for each devise

UPDATE AGAIN :

When you resize windows, look this native class :

@media (min-width: 768px)
.form-horizontal .control-label {
text-align: right;
}