Bootstrap - select and button next to each other

css, twitter-bootstrap, twitter-bootstrap-3

Solution

Following Boostrap syntax :

You should add `form-inline` class to your form, see the official doc

Official example

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Problem

I have a `<select>` and a button next to each other and wanted to style them with bootstrap. `Select` without class looks like this: `select` with `class="form-control"` looks like this: Notice, that the button is now under select. I'm not sure, which CSS property is responsible for this. What should I change, to have button next to the select?

Original source