How to use labels inside the control line

Question

I am trying to use Boostrap to layout a form with horizontal line inputs (a la "control-row"), but there are labels above the form input. See the example below.

Is this possible with Boostrap? I try to avoid using a million lines / ranges # divs, but cannot find another way to implement this without a lot of custom CSS. My current plan is to check the use of tables: / Please save me from this fate!

  LABEL1 LABEL2
 |  Input |  |  Input |

 LABEL 3
 |  Long input |

 LABEL 4 LABEL 5
 |  Input |  |  Input |

Answer 1

I managed to accomplish this without using tables, using a combination of the control-row and control-group classes.

<div class="container"> <form> <div class="controls-row"> <div class="control-group"> <label for="first-name" class="control-label">First Name:</label> <div class="controls"> <input type="text" id="first-name" name="FirstName" /> </div> </div> <div class="control-group"> <label for="middle-initial" class="control-label">MI:</label> <div class="controls"> <input type="text" id="middle-initial" name="MiddleInitial" class="input-mini" /> </div> </div> <div class="control-group"> <label for="last-name" class="control-label">Last Name:</label> <div class="controls"> <input type="text" id="last-name" name="LastName" /> </div> </div> </div> <div class="control-row"> <div class="control-group"> <label for="ssn" class="control-label">Social Security Number:</label> <div class="controls"> <input type="text" id="ssn" name="SocialSecurityNumber" /> </div> </div> <div class="control-group"> <label for="dob" class="control-label">Date of Birth:</label> <div class="controls input-append"> <input type="text" id="dob" name="DateOfBirth" /> <a href="#" class="btn btn-small"><i class="icon-calendar"></i></a> </div> </div> </div> </form> 

To make it work correctly, though (since the control group div has display: block; I had to override this class and add vertical-align: top; with the following):

 .control-group { display: inline-block; vertical-align: top; } 

Here's how it happened: http://jsfiddle.net/bhGyz/