Bootstrap 2 grid issue for sidebar widget

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.