Keep buttons and form with select dropdown on same row in Bootstrap 3

Question

I'm struggling to keep buttons, and a form with a <select> tag (including its label) all on the same row in Bootstrap 3. Whenever the form is rendered, it seems to add a line break before the form. Here's what I have put together so far (http://www.bootply.com/98022):

<div class="container">
    <div class="row">
      <button class="btn btn-default">Test 1</button>
      <button class="btn btn-default">Test 2</button>
      <form role="form" class="form-inline">      
      <div class="form-group">
        <label for="selectUser">Select:</label>
        <select id="selectUser" class="form-control selectWidth">
          <option class="">One</option>
          <option class="">Two</option>
          <option class="">Three</option>
        </select>
      </div>
      <div class="btn-group">
        <button class="btn btn-default">Test 3</button>
      </div>
      </form>
    </div> <!-- End Row -->
</div> <!-- End Container -->

I thought that the class="form-inline" would keep it on the same row. Unfortunately, this is how it renders:

This is a mock-up I created in an image editing program of what I'd like it to look like:

I have deliberately chosen to use the <select> element instead of Bootstrap dropdowns, as the interface on mobile devices is optimal (the list will be quite large and trying to select the correct option on a small screen is easier with a form <select> element).

I found similar questions, but most either don't address the <select> tag within a form, or are for older versions of Bootstrap (2.x). Any help would be greatly appreciated.

Thanks!

Answer 1

Your first two button are not inside the form tag.

It seems form-inline does not define styles for labels, so add a left float some padding and set the width of the select to auto.

<div class="container">
    <div class="row">
    <form role="form" class="form-inline">  
      <button class="btn btn-default">Test 1</button>
      <button class="btn btn-default">Test 2</button>
      <div class="form-group">
        <label for="selectUser" style="float:left;padding: 6px 12px 2px 12px;">Select:</label>
        <select id="selectUser" style="width:auto;" class="form-control selectWidth">
          <option class="">One</option>
          <option class="">Two</option>
          <option class="">Three</option>
        </select>
      </div>
      <div class="btn-group">
        <button class="btn btn-default">Test 3</button>
      </div>
      </form>
    </div> <!-- End Row -->
</div> <!-- End Container -->