Twitter Bootstrap - Two Column layout for <form> - html

Question

In Bootstrap 2.3, is there a standardized way to have a two-column layout for an HTML <form> with labels/inputs/actions? I don't see any in the documentation.
An example image of what I want: http://i.imgur.com/3o6IoN4.png
As an aside, I need there to be a solid background color that spans the entire width of the div.span12 or other enclosing container. Having two .span6 causes a break in the background color in the center (which I suppose can be fixed by wrapping the two .span6 in a div.clearfix with the background class applied?

Answer 1

Easy stuff. Bring the bootstrap row within a parent div and set the background of that div to a color of your choosing.
The Markup:
<div id="background-color">
<form id="form1" name="form1" method="post" action=""><!-- START THE FORM -->
<div class="row-fluid">
<div class="span6"> <!-- FIRST COLUMN -->
<label>First Name</label>
<label for="textfield"></label>
<input type="text" />
<label>Last Name</label>
<label for="textfield"></label>
<input type="text" />
</div>
<div class="span6"> <!-- SECOND COLUMN -->
<label>Other</label>
<label for="textfield"></label>
<input type="text" />
<label>Fields</label>
<label for="textfield"></label>
<input type="text" />
<input type="submit" name="button" id="button" value="Submit" />
</form> <!-- END THE FORM -->
</div>
</form>
</div> <!-- End row -->
</div> <!-- END BACKGROUND -->
The CSS:
#background-color {background-color: #CCC;}
I hope this helps

Answer 2

To my understanding for Bootstrap 3 these changes are required;
all code sitting in container to access grid system info here
span to col for new version
use device class as suits your requirements info here
labels and controls wrapped in form-group for spacing info here
form class to form-horizontal removes the need for row divs (i have used nested columns without rows, seems to display correctly with form-horizontals function)
panel used to frame the form as pictured
<div class="container">
<div class="panel panel-default" style="background-color: #CCC">
<div class="panel-body">
<form id="form1" name="form1" method="post" action="" class="form-horizontal"><!-- START THE FORM -->
<div class="col-sm-6"> <!-- FIRST COLUMN -->
<div class="form-group">
<label for="inputFirstname" class="col-sm-4 control-label">First Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputFirstname" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="inputLastname" class="col-sm-4 control-label">Last Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputLastname" placeholder="Last Name">
</div>
</div>
</div>
<div class="col-sm-6"> <!-- SECOND COLUMN -->
<div class="form-group">
<label for="inputEmail" class="col-sm-4 control-label">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputUsername" class="col-sm-4 control-label">Username</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputUsername" placeholder="Username">
</div>
</div>
</div>
</form> <!-- END THE FORM -->
</div>
</div><!-- END PANEL -->
</div>