Twitter Bootstrap - Two Column layout for <form>

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>