How to make a small width input in Bootstrap3 forms

Question

I've got a form in bootstrap 3, however I do not know how to make a narrower input. In my example I need home number inpout only fot characters (digits).

You can take a look here: http://jsfiddle.net/DTcHh/3346/ (you need to see the results on full screen)

or here:

<div class="row">
    <div class="col-md-6">

    <form class="form-horizontal">
    <fieldset>

        <legend>Left column</legend>

        <div class="form-group">
            <label class="col-md-3 control-label">Country</label>
            <div class="col-md-9">
            <input type="text" id="firma_nip" class="form-control input-md">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">City</label>
            <div class="col-md-9">
            <input type="text" id="firma_nip" class="form-control input-md">
            </div>
        </div>

        <div class="form-group">
          <div class="controls form-inline">
            <label class="col-md-3 control-label">Street</label>
            <div class="col-md-4">
                <input type="text" class="form-control input-md input-small" id="inputKey">
            </div>
            <div class="col-md-4">
                <label for="firma_nip">No</label>
            <input type="text" class="form-control input-md" placeholder="Value" id="inputValue">
            </div>
          </div>
        </div>


        <!-- Button -->
        <div class="form-group">
          <label class="col-md-3 control-label" for="submit"></label>
          <div class="col-md-9">
            <button id="submit" name="submit" class="btn btn-success">Add new address</button>
          </div>
        </div>

    </fieldset>
    </form>
    </div>

    <div class="col-md-6">
        ..right column
    </div>

</div>

Ideal solution should not use custom classes. Is it possible to do in bootstrap?

I would like to have this kind of result:

Answer 1

You can do it by adding an additional class to your custom css style file. [http://www.bootply.com/THJAazI66Q][1] It has been requested [https://github.com/twbs/bootstrap/issues/15107][2]

.input-xs {
        height: 22px;
        padding: 5px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
        }


    <div class="row">
      <div class="col-md-6">
      <form class="form-horizontal">
        <fieldset>
          <legend>Left column</legend>

          <div class="form-group">
            <label class="col-md-3 control-label">Country</label>
            <div class="col-md-9">
              <input type="text" id="firma_nip" class="form-control input-xs">
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-3 control-label">City</label>
            <div class="col-md-9">
              <input type="text" id="firma_nip" class="form-control input-xs">
            </div>
          </div>

          <div class="form-group">
            <div class="controls form-inline">
              <label class="col-md-3 control-label">Street</label>
              <div class="col-md-4">
                <input type="text" class="form-control input-xs input-small" id="inputValue">
              </div>
            </div>
          </div>

          <!-- Button -->

          <div class="form-group">
            <label class="col-md-3 control-label" for="submit"></label>
            <div class="col-md-9">
              <button id="submit" name="submit" class=" btn-xs btn-success">Add new address</button>
            </div>

          </div>

        </fieldset>
        </form>
      </div>

      <div class="col-md-6">
        ..right column
      </div>


    </div>

Answer 2

Here is your answer

<div class="row">
<div class="col-xs-6">
<form class="form-horizontal">
<fieldset>
    <legend>Left column</legend>
    <div class="form-group col-xs-12 pull-left">
        <div class="col-xs-3">
            <label class="control-label pull-right">Country</label>
        </div>
        <div class="col-xs-9">
            <input type="text"  class=" form-control input-md pull-left">
            </div>
    </div>
    <div class="form-group col-xs-12">
        <div class="col-xs-3">
            <label class="col-xs-3 control-label pull-right">City</label>
        </div>
        <div class="col-xs-9">
            <input type="text" id"firma_nip" class="col-xs-9 form-control input-md pull-left">
            </div>
    </div>
    <div class="form-group col-xs-12">
        <div class="col-xs-3">
            <label class=" control-label pull-right">Street</label>
        </div>
        <div class="col-xs-4">            
            <input type="text" class="form-control input-md input-small pull-left" id="inputKey">
        </div>
        <div class="col-xs-2"> 
            <label class="col-xs-3 pull-left control-label" for="firma_nip">No</label>
        </div>
        <div class="col-xs-3"> 
            <input type="text" class="form-control input-md pull-left" placeholder="Value" id="inputValue">
        </div>
    </div>
    <!-- Button -->
    <div class="form-group col-xs-12">
      <label class="col-xs-3 xs-label" for="submit"></label>
      <div class="col-xs-9">
        <button id="submit" name="submit" class="btn btn-success">Add new address</button>
      </div>
    </div>
</fieldset>
</form>
</div>

<div class="col-xs-6">
    ..right column
</div>

Answer 3

Try sm or xs in place of md it will help. For more understanding refer# http://getbootstrap.com/css/#grid

<div class="row">
<div class="col-sm-6">

    <form class="form-horizontal">
        <fieldset>
            <legend>Left column</legend>
            <div class="form-group">
                <label class="col-sm-3 control-label">Country</label>
                <div class="col-sm-9">
                    <input type="text" id="firma_nip" class="form-control input-sm">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">City</label>
                <div class="col-sm-9">
                    <input type="text" id="firma_nip" class="form-control input-sm">
                </div>
            </div>

            <div class="form-group">
                <div class="controls form-inline">
                    <label class="col-sm-3 control-label">Street</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control input-sm input-small" id="inputKey">
                    </div>
                    <div class="col-sm-4">
                        <label for="firma_nip">No</label>
                        <input type="text" class="form-control input-sm" placeholder="Value" id="inputValue">
                    </div>
                </div>
            </div>


            <!-- Button -->
            <div class="form-group">
                <label class="col-sm-3 control-label" for="submit"></label>
                <div class="col-sm-9">
                    <button id="submit" name="submit" class="btn btn-success">Add new address</button>
                </div>
            </div>

        </fieldset>
    </form>
</div>

<div class="col-sm-6">
    ..right column
</div>