Bootstrap 2 grid issue for sidebar widget - html

Question

I'm trying to get the label and input and icon all on the same row in a sidebar widget area. this is what it should look like (edit: not sure why but image shows in chrome but not FF on SO)
This is what I have so far. I can't seem to get the labels and inputs on the save row. they keep wrapping around.
Here's a fiddle
http://jsfiddle.net/#&togetherjs=p6omqsAoyN
Here's the HTML. Can anyone tell me how to get them all on the same row so that it looks like the image above?
<div class="roster-reports module">
<h3>Reports</h3>
<div class="upper" >
<h5 class="strong">Generate Report</h5>
<ul class="row-fluid stat-pending">
<li class="span4">
<label for="inputReportFromDate" class="control-label">From Date</label>
</li>
<li class="span4">
<input type="date" class="form-control" width="2" id="inputReportFromDate">
</li>
<li class="span4">
<i class=" icon-calendar"></i>
</li>
</ul>
<div class="">
<div class="">
<label for="inputReportToDate" class="control-label">To Date</label>
</div>
<div class="">
<input type="date" class="form-control" id="inputReportToDate">
<i class="icon-calendar"></i>
</div>
</div>
<div class="">
<div class="">
<label for="selectReportType" class="control-label">Report Type</label>
</div>
<div class="">
<select id="inputReportType" class="form-control">
<option value="Query History">Query History</option>
<option value="DAS Alerts">DAS Alerts</option>
</select>
</div>
</div>
<div class="">
<div class="">
<label for="selectReportType" class="col-lg-2 control-label">Report Format</label>
</div>
<div class="">
<select id="selectReportFormat" class="form-control">
<option value="PDF">PDF</option>
<option value="CSV">CSV</option>
<option value="XLXS">XLXS</option>
</select>
</div>
</div>
<div class="">
<div class="">
<button id="buttonRosterReportsGenerate" type="submit" class="btn btn-primary">Generate</button>
</div>
</div>
</div>
</div>

Answer 1

I am not sure what you mean exactly by "sidebar widget area", but the common way to achieve what you want in bootstrap is using .form-group elements inside a .form-horizontal <form>. Modified markup :
<div class="roster-reports module">
<h3>Reports</h3>
<div class="upper">
<form class="form-horizontal" role="form">
<div class="form-group">
<h5 class="strong">Generate Report</h5>
</div>
<div class="form-group">
<label for="inputReportFromDate" class="control-label">From Date</label>
<input class="form-control" id="inputReportFromDate" type="date" width="2"/>
<i class=" icon-calendar"></i>
</div>
<div class="form-group">
<label for="inputReportToDate" class="control-label">To Date</label>
<input class="form-control" id="inputReportToDate" type="date"/>
<i class=" icon-calendar"></i>
</div>
<div class="form-group">
<label for="selectReportType" class="control-label">Report Type</label>
<select class="form-control" id="inputReportType">
<option value="Query History">Query History</option>
<option value="DAS Alerts">DAS Alerts</option>
</select>
</div>
<div class="form-group">
<label for="selectReportType" class="control-label">Report Format</label>
<select class="form-control" id="selectReportFormat">
<option value="PDF">PDF</option>
<option value="CSV">CSV</option>
<option value="XLXS">XLXS</option>
</select>
</div>
<div class="form-group">
<label class="control-label"></label>
<button class="btn btn-primary" id="buttonRosterReportsGenerate" type="submit">Generate</button>
</div>
</form>
</div>
</div>
see fiddle -> http://jsfiddle.net/h159f8nw/
As I wrote, I am not sure how you want to use this, the fiddle does not completely fulfill the position of "Generate Report" as in the image, but .form-group and .form-horizontal is defently the way to go.