Bootstrap 3: how to create an inline form with selects and labels?

Question

There's a CSS rule in bootstrap that sets the width of .form-control to 100% on small screen sizes. So even when it's floated, it will take the whole width and therefore start on a new line. Good news is you only need a couple lines of CSS to override it:

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

Hope this simplifies the problem for anyone still facing the issue! http://jsfiddle.net/c3m77ah6/2/

You have to wrap your label around the select. Like this:

<div class="form-group">
  <label>C-Band
      <select id="cband" class="form-control">
         <option value="C15+">C15+</option>
         <option value="C12-14">C12-14</option>
         <option value="Other">Other</option>
      </select>
  </label> 
</div>

And then add the following CSS:

.form-group label {
    float: left;
    text-align: left;
    font-weight: normal;
}

.form-group select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

Here is your updated fiddle: Updated Fiddle

form-inline class with form-group will do the job like

<div class="form-group form-inline">
<label for="sel1">My InlineSelect: </label>             
    <select class="form-control" id="rotit">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select>
</div>  

demo : http://jsfiddle.net/9arahevn/2/

This problem is so recorrent that there is a Github project solving it

https://fk.github.io/select2-bootstrap-css/

Place their CSS file right after the CSS from Select2

<link rel="stylesheet" href="css/select2.min.css">
<link rel="stylesheet" href="css/select2-bootstrap.css">

Then you can use the label along with the select

<div class="form-group">
    <label for="sName">Select Title</label>
    <select class="js-example-basic-single form-control" id="sName">
    </select>
</div>