Aligning input and select next to each other in Bootstrap 3

Question

I have this code snippet, but this renders dropdown after line break, What's the best bootstrap 3 col class to get it correct? (select dropdown next to input medium-inline)

<form class="form-horizontal well" >
   <div class="form-group">
      <label class="col-lg-2 control-label">Memory</label>
      <div class="col-lg-4">
         <div>
            <input id="memory" type="text" class="form-control">
         </div>
         <div class="col-lg-4">
            <select id="memoryType"  class="form-control">
               <option value="GB" selected="selected">GB</option>
               <option value="MB">MB</option>
            </select>
         </div>
      </div>
   </div>
</form>

Answer 1

Ok, this is how I would do it.

First add the form-inline class to your form.

Then remove the col-lg classes from labels and inputs.

Also remove all un-needed divs too, which results in the below html:

Markup

<form class="form-inline well" >
    <div class="form-group">
        <label class="control-label">Memory</label>
        <input id="memory" type="text" class="form-control">
    </div>
    <div class="form-group">
        <select id="memoryType"  class="form-control">
            <option value="GB" selected="selected">GB</option>
            <option value="MB">MB</option>
        </select>
    </div>
</form>

Screen grab

Answer 2

If you want your form-fields to align horizontally - you can actually use the inline form. eg:

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="memory">Memory</label>
        <input id="memory" type="text" class="form-control">
    </div>
    <div class="form-group">
        <select id="memoryType" class="form-control">
            <option value="GB" selected="selected">GB</option>
            <option value="MB">MB</option>
        </select>
    </div>
</form>

Note: not tested in an actual browser...