Bootsstrap Base page
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row row-centered">
<div class="col-xs-8">
<h3>
Quick Search
</h3>
<form role="form" action="post" method="post">
<div class="col-xs-8 col-md-3 col-lg-3">
<div class="form-group">
<div class="input-group">
<select class="form-control input-sm" name="location">
<option value="" disabled selected>Location</option>
<option value="London">London</option>
<option value="Bristol">Bristol</option>
<option value="Manchester">Manchester</option>
</select>
</div>
</div>
</div>
<div class="col-xs-8 col-md-3 col-lg-3">
<div class="form-group">
<div class="input-group">
<select id="skill" name="skill" class="form-control input-sm" ">
<option value=" " disabled selected>Type of editor</option>
<option value="">
All editors
</option>
<option value="offline">
Offline editor
</option>
<option value="online">
Online editor
</option>
<option value="offline,online ">Offline & Online editor</option>
</select>
</div>
</div>
</div>
<div class="col-xs-8 col-md-3 col-lg-3 ">
<div class="form-group ">
<div class="input-group ">
<select...
CSS
.input-sm {
min-width: 160px !important;
}