Input Widths on Bootstrap 3

Input widths on Bootstrap 3

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.

Adjust input width with bootstrap class

You can use bootstrap grid like

<div class="btn-group">
<input type="text" class="form-control col-md-2" />
</div>

Read this tutorial https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

How to make input extend to width of column in Bootstrap 3?

As others have mentioned, you need to specify custom widths with inline forms. From the docs:

Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

In your case, you need to specify width: 100% for both the input and the form-group:

<div class="form-group" style="width: 100%">

and

<input type="text" class="form-control" id="iR" placeholder="some mid long explanation" style="width: 100%" />

Working example in JSFiddle

Bootstrap 3 - Space between inputs with Icons and custom width

You were missing few things in the form group so I have wrapped things up. Hope it will help you :)

Below is the working snippet:

.myform .form-inline .input-group .input-group-addon{ width:20px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="row myform">  <div class="col-xs-12">    <form name="myform" role="form" novalidate>
      <div class="form-inline ">        <div class="form-group col-xs-6">          <div class="input-group col-xs-12">            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>            <input type="email" class="form-control" placeholder="Email de l'interlocuteur">          </div>        </div>        <div class="form-group col-xs-6">          <div class="input-group col-xs-12">            <span class="input-group-addon"><i class="fa fa-phone"></i></span>            <input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">          </div>        </div>      </div>
    </form>  </div>
</div>

Cannot change width of input in bootstrap-3

I have just used some random html from my previous project here. You can surely try it.

Here is the fiddle : https://jsfiddle.net/2hcnydwf/6/

Here is the HTML :

<div class="container">
              <div class="row">
                <div class=" col-md-12 col-sm-12 col-xs-12 search-container">
                  <div class="col-md-3 col-sm-6 col-xs-6 searchbox">
                    <input class="form-control searchinput" type="text" placeholder="Area">
                  </div>
                  <div class="col-md-3 col-sm-6 col-xs-6">
                    <select class="form-control searchinput">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div>
                  <div class="col-md-3 col-sm-6 col-xs-6">
                    <select class="form-control searchinput">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div>
                  <div class="col-md-3 col-sm-6 col-xs-6">
                    <button href="#" class="btn-search">Search</button>
                  </div>
                </div>
              </div>
            </div>

Here is the CSS :

.searchinput{height: 40px;border:#fff 1px solid;box-shadow: none;}

How to make a small width input in Bootstrap3 forms

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>

Input Widths on Bootstrap 3