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">
<divclass="input-group"><divclass="form-group"><div><labelfor="startDate" >
From
</label><inputtype="text"name="startDate"value=""readonly="readonly"id="startDate"style="width: 70px;"class="datepicker form-control"></div></div><divclass="form-group"><div><labelfor="endDate">
To
</label><inputtype="text"name="endDate"value=""readonly="readonly"id="endDate"style="width: 70px;"class="datepicker form-control"></div></div></div></form>
EDIT:
Or you can try using grids:
<form><divclass="container"><divclass="row"><divclass="col-xs-1"><labelfor="startDate">from</lable></div><divclass="col-xs-3"><inputtype="text"name="startDate"value=""readonly="readonly"id="startDate"class="datepicker form-control"></div><divclass="col-xs-1"><labelfor="endDate">to</lable></div><divclass="col-xs-3"><inputtype="text"name="endDate"value=""readonly="readonly"id="startDate"class="datepicker form-control"></div></div></div></form>
Solution 2:
You can do this on the HTML
<form name="someForm" method="post" action="/someAction.do"class="form-inline">
<divclass="form-group"><labelfor="startDate" >
From
</label><inputtype="text"name="startDate"value=""readonly="readonly"id="startDate"style="width: 70px;"class="datepicker form-control"/></div><divclass="form-group"><labelfor="endDate">
To
</label><inputtype="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">
<divclass="form-group"><divclass="col-xs-20"><divcass="form-inline"><labelfor="startDate"class="col-xs-2 control-label">From</label><divclass="col-xs-2"><inputtype="text"name="startDate"value=""readonly="readonly"id="startDate"style="width: 70px;"class="form-control"placeholder="From"></div></div></div></div><divclass="form-group"><divclass="col-xs-20"><divclass="form-inline"><labelfor="endDate"class="col-xs-2 control-label">To</label><divclass="col-xs-2"><inputtype="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.
Post a Comment for "Inline Form Bootstrap Is Not Working"