Inline Form Bootstrap Is Not Working

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 arrang

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

Solution 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

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