Bootstrap - select and button next to each other
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
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>