How to combine inline and horizontal form in bootstrap? - forms

Question

Anyone who can explain how this would be done in bootstrap?
First try was with 2 inline forms, but then the search button screws it up...
So i was thinking on a combination of an inline and a horizontal form.
Any ideas how to do this?

Answer 1

My guess here is that you want to do this with as much bootstrap markup as possible and as little custom styling as possible, and in that case I would do it like so:
HTML:
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal">
<div class="row">
<div class="col-sm-10">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="search" class="col-sm-2 control-label">Find</label>
<div class="col-sm-10">
<input type="search" class="form-control" placeholder="What are you searching for?"/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">in</label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="Postcode"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">under</label>
<div class="col-sm-10">
<select class="form-control">
<option>All categories</option>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
<option>Category 4</option>
<option>Category 5</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<select class="form-control">
<option>Within 20 miles of</option>
<option>Within 30 miles of</option>
<option>Within 40 miles of</option>
<option>Within 50 miles of</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 cover-col">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-search"></i> Search</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
CSS:
.panel-default {
background-color: #e6ed9f;
}
.cover-col {
height: 6em;
}
.cover-col .btn {
display: block;
width: 100%;
height: 100%;
padding-left: 15px;
padding-right: 15px;
}
.cover-col .form-group {
height: 100%;
margin-bottom: 0;
}
.cover-col .form-group > div {
height: 100%;
}
JSFIDDLE