Input widths on Bootstrap 3

Question

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.

In Bootstrap 3

You can simply create a custom style:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

Then add it to form controls like so:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

This way you don't have to put extra markup for layout in your HTML.

ASP.net MVC go to Content- Site.css and remove or comment this line:

input,
select,
textarea {
    /*max-width: 280px;*/
}

I think you need to wrap the inputs inside a col-lg-4, and then inside the form-group and it all gets contained in a form-horizontal..

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

Demo on Bootply - http://bootply.com/78156

EDIT: From the Bootstrap 3 docs..

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

So another option is to set a specific width using CSS:

.form-control {
    width:100px;
}

Or, apply the col-sm-* to the `form-group'.

Current docs say to use .col-xs-x , no lg. Then I try in fiddle and it's seem to work :

http://jsfiddle.net/tX3ae/225/

to keep the layout maybe you can change where you put the class "row" like this :

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

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

http://jsfiddle.net/tX3ae/226/