Q: Select element is not aligned with the inline-form I'm using bootstrap 3, inline form please see it in full screen, You'll notice that the select menu is slightly above the inline form. In my project I'm using ChosenJS. This snippet doesn't have that but still, it's slightly above the rest of the input fields. 
If I switch the select with another input, everything works fine. It has to do with select element itself.


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-inline">

  <label class="control-label col-md-3" for="color"> Select Color 
<select name="color" id="color" class="color form-control col-md-3" >
            <option selected="selected" value="">Select Color</option>
            <option value="black">Black</option>
            <option value="white">White</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="yellow">Yellow</option>
            <option value="grey">Grey</option>
            <option value="purple">purple</option>
            <option value="navy">Navy Blue</option>
            <option value="pink">Pink</option>
            <option value="silver">Silver</option>
            <option value="gold">gold</option>
            <option value="brown">Brown</option>
            <option value="orange">Orange</option>
          </select>
          </label>

  <label class="control-label col-md-3 col-3" for="size">Product Size
<input type="text" class="form-control col-md-3 col-3" id="size" name="size" placeholder="Size">
</label>

  <label class="control-label col-md-3 col-3" for="qty">Quantity <span class="required">*</span>
<input type="text" class="form-control col-md-3 col-3" id="qty" name="qty" placeholder="Quantity (Required)" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required>
</label>

  <label class="control-label col-md-3 col-3">Photos
      <span class="form-group">
  <span class="input-group input-file">
   <span class="input-group-btn">
          <button class="btn btn-default btn-choose" type="button">Choose</button>
      </span>
      <input type="text" id="photo" name="photo" class="form-control" placeholder='Choose a file...' accept="image/*" multiple />
        <input type="hidden" name="MAX_FILE_SIZE" value="1000000"/>
  </span>
 </span>
</label>




</div>



A: Apply form-control class to your select element
Then you can also try wrapping your element in <div class="form-horizontal"></div> also you can put them in a container class and separate each row in the form by wrapping row elements with <div class="row"></div>
The above always works for me.
Also take a look at this fiddle. Everything is linining nicely using your code
