Layout form input bootstrap - html

Question

I have a problem with layout bootstrap. I want the search button to remain at the end of the line.
Here is my code:
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset" >clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button> //this not part form input
output:
I want the layout like this:
How can this resolved?

Answer 1

1)Place search button into the form.
2) If you don't want to place the search button into the form, then try the below code.
Just, make the form inline.
form {
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset">clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button>
Note: View the output in full page mode.