How to layout a fairly simple bootstrap scenario?

Question

I am new to bootstrap and trying to layout something fairly simple using their grid system, but I am having a difficult time. Here is what I want:

So basically, a title of the Report on the left. A log in button floated right. A panel with report criteria beneath it. The sidebar contains the list of reports and to the right of it is the actual content of the report.

I am having trouble aligning panels and so on. Another problem is that on a wide screen the width of the panels max out at a certain width.

I am looking for a tip or example or a good tutorial on how to do this type of thing.

Answer 1

Here's a quick mock-up to get you started: http://jsfiddle.net/panchroma/hjhtF/

As @isherwood mentioned, check out the scaffolding documentation.

HTML

<div class="container">
<div class="row-fluid">
    <div class="span12">
        <h3>Report Criteria ....</h3>
        <span class="pull-right btn">login</span>
    </div><!-- end span12 -->
</div> <!-- end row -->

<div class="row-fluid">
    <div class="span3">
        <h3>Category</h3>
        <ul class="side-nav">
            <li>a</li>
        </ul>
    </div><!-- end span3 -->

    <div class="span9">
    <table class="table">
    <!-- table details -->
    </table>
    </div><!-- end span9 -->
</div> <!-- end row -->


</div><!-- end container -->

Hope this gets you started!