Bootstrap inline form not working

Question

I do not understand why this does not work. I am trying to get these two elements of shape side by side. I would also like to have some elements next to each other, and some of them are located below in the same form (as in future elements it will be below these two). I left the role = "form" since I am using Struts 1 and this breaks the tag <html:form>.

<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 should put your controls in 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 it in 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>  

CSS

 .form-group{
float:Left;
}

JSfiddle

Answer 3

Bootstrap3 -

<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>

.

In the Twitter Bootstrap Forms , you can find additional examples.