Bootstrap - select and button next to each other

Question

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?

Answer 1

You can wrap the <select> and the <button> in an input-group:

<div class="input-group">   <select class="form-control">     <option>Select option..</option>     <option>Option 1</option>     <option>Option 2</option>   </select>               <span class="input-group-btn">     <button class="btn btn-default" type="button" tabindex="-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>   </span> </div> 

This way you can use a normal form and just group one select and button together.

Check out the JSFiddle example

Answer 2

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>