Bootstrap 3 select input form inline

Question

I'm trying to get input and select option inline attached with each other like this demo using Bootstrap 2.

Following Bootstrap 3 guidelines I manage to do this:

<div class="container">
    <div class="col-sm-7 pull-right well">
      <form class="form-inline" action="#" method="get">
        <div class="form-group col-sm-5">
          <input class="form-control" type="text" value="" placeholder="Search" name="q">
        </div>
        <div class="form-group col-sm-3">
          <select class="form-control" name="category">
              <option>select</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
          </select>
        </div>
        <button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
      </form>
    </div>
</div>

It's responsive, but input and select can't be attached without some nasty css hacks. I found lot of examples with attached buttons, but that does not work with select element.

Answer 1

Another different answer to an old question. However, I found a implementation made specifically for bootstrap which might prove useful here. Hope this helps anybody who is looking...

Bootstrap-select

Answer 2

Can be done with pure Bootstrap code.

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="form-group">
  <label for="id" class="col-md-2 control-label">ID</label>
  <div class="input-group">
    <span class="input-group-btn">
      <select class="form-control" name="id" id="id">
        <option value="">
      </select>
    </span>
    <span class="input-group-btn">
      <select class="form-control" name="nr" id="nr">
        <option value="">
      </select>
    </span>
  </div>	
</div>	

Answer 3

It requires a minor CSS addition to make it work with Bootstrap 3:

.input-group-btn:last-child > .form-control {
  margin-left: -1px;
  width: auto;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="form-group">
  <div class="input-group">
    <input class="form-control" name="q" type="text" placeholder="Search">
    
    <div class="input-group-btn">
      <select class="form-control" name="category">
        <option>select</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
    
  </div>
</div>