Inline bootstrap form with labels above inputs - html

Question

How can I move down the search button at the same level with other textfields?
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="row align-center">
<input type="submit" value="search" class="btn btn-primary" />
</div>
</form>

Answer 1

An easy way to fix is to add same structure as other input fields (also avoid to add additional CSS which may not cover all cases), for the label, use as a placeholder.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view -->
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="col-md-1 form-group align-center">
<label for="created_at_lt"> </label>
<input type="submit" value="search" class="btn btn-primary form-control" />
</div>
</form>

Answer 2

Another simple way would be to add the height of the label as a margin.
Make sure you go into fullpage view of the snippet to see the proper result:
.lowered {
margin-top: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view -->
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="col-md-2 form-group align-center">
<input type="submit" value="search" class="btn btn-primary form-control lowered" />
</div>
</form>

Answer 3

Try using br tag at end of label tag
<div class="row">
<div class="col-md-6">
<label for="search">Title</label><br>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-6">
<label for="year">Year</label><br>
<input type="text" name="year" id="year" class="form-control" />
</div>
</div>