Narrow size of inputs in bootstrap 3

Question

I want to narrow the size of input boxes in the horizontal form.

I used col-sm-4 to make text boxes narrower.

 <form class="form-horizontal">
      <div class=" form-group">
          <label class="col-sm-2 control-label">date</label>
          <div class="col-sm-4">
               <input name="date" type="text" class="form-control" />
           </div>
       </div>    
</form>

For big size it works, however when I resize the form and make it smaller, suddenly, the length of input box will stretch and become larger. So for big screens the input will have 230px and for smaller screen it will have 608px

The fiddel http://jsfiddle.net/3YWkd/

I want that the size of text box remain the same during page shrink.

Answer 1

This should do it:

<form class="form-horizontal">
    <div class=" form-group">
        <label class="col-sm-2 col-xs-12 control-label">date</label>
        <div class="col-sm-4 col-xs-4">
            <input name="date" type="text" class="form-control" />
        </div>
    </div>    
</form>

Answer 2

You just need to add the mobile (xs) classes, like so:

 <div class="col-sm-4 col-xs-4">
        <input name="fromDate" type="text" class="form-control" />
 </div>

Or just leave the col-xs-4, no need for the sm in this case.

Edit:

Re: your comment, you may use slightly different html, like soQ

<div class=" form-group">
    <div class="col-xs-2">
        <label class="control-label" for="fromDate">date</label>
    </div>
    <div class="col-xs-4">
        <input name="fromDate" type="text" class="form-control" />
    </div>
</div>

fiddle