I'm struggling to keep buttons, and a form with a ` ` 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): ``` Test 1 Test 2 Select: One Two Three Test 3 ``` 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…

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

forms, twitter-bootstrap, twitter-bootstrap-3

Solution

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 -->

Problem

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>  </div>  ``` 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!

Original source