inline form Bootstrap is not working - html

Question

I don't understand why this is not working. I'm trying to get these two form elements side by side. Also I would like to be able to have some elements side by side and some arranged below in the same form (as in future elements will be below these two). I left off the role="form" since I'm using Struts 1 and this breaks the <html:form> tag.
<form name="someForm" method="post" action="/someAction.do" class="form-inline">
<div class="form-group">
<div>
<label for="startDate" >
From
</label>
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
<div class="form-group">
<div>
<label for="endDate">
To
</label>
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
JSFiddle

Answer 1

You have to put your controls into an input-group:
<form name="someForm" method="post" action="/someAction.do" class="form-inline">
<div class="input-group">
<div class="form-group">
<div>
<label for="startDate" >
From
</label>
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
<div class="form-group">
<div>
<label for="endDate">
To
</label>
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
</div>
</form>
http://jsfiddle.net/3h3NB/3/
EDIT:
Or you can try using grids:
<form>
<div class="container">
<div class="row">
<div class="col-xs-1">
<label for="startDate">from</lable>
</div>
<div class="col-xs-3">
<input type="text" name="startDate" value="" readonly="readonly" id="startDate"class="datepicker form-control">
</div>
<div class="col-xs-1">
<label for="endDate">to</lable>
</div>
<div class="col-xs-3">
<input type="text" name="endDate" value="" readonly="readonly" id="startDate" class="datepicker form-control">
</div>
</div>
</div>
</form>
http://jsfiddle.net/3h3NB/76/

Answer 2

You can do this on the HTML
<form name="someForm" method="post" action="/someAction.do" class="form-inline">
<div class="form-group">
<label for="startDate" >
From
</label>
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control"/>
</div>
<div class="form-group">
<label for="endDate">
To
</label>
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control"/>
</div>
and do this on the CSS
.form-group{
float:Left;
}
JSfiddle link

Answer 3

For Bootstrap3 you can do something like this
<form name="someForm" method="post" action="/someAction.do" class="form-horizontal">
<div class="form-group">
<div class="col-xs-20">
<div cass="form-inline">
<label for="startDate" class="col-xs-2 control-label">From</label>
<div class="col-xs-2">
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="form-control" placeholder="From">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-20">
<div class="form-inline">
<label for="endDate" class="col-xs-2 control-label">To</label>
<div class="col-xs-2">
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="form-control" placeholder="To">
</div>
</div>
</div>
</div>
</form>
See Online example
You can find more examples at Twitter Bootstrap Forms tutorial.