Twitter Bootstrap - two-column layout for <form>

Question

In Bootstrap 2.3, is there a standard way to have a two-column layout for HTML <form> with labels / inputs / actions? I do not see the documentation.

Example image of what I want: http://i.imgur.com/3o6IoN4.png

Aside, I should have a solid background color that spans the entire width of div.span12 or another container container. Having two .span6 causes a gap in the background color in the center (which, I believe, can be fixed by wrapping two .span6 in div.clearfix with the background class applied?

Answer 1

Lightweight material. Take the bootstrap line in the parent div and set the background of this div to the color of your choice.

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 --> 

CSS:

 #background-color {background-color: #CCC;} 

I hope this helps

Answer 2

In my understanding for Bootstrap 3, these changes are necessary;

• all code sitting in the container for access to the system system information here
• span to col for new version
• use the device class that meets your requirements information here
• labels and controls wrapped in a group of forms for the interval information here
• the form class for horizontal form eliminates the need for div lines (I used nested columns without rows, it seems to display correctly using the form-horizontals function)

• panel used to form the shape in the photograph

   <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>