Changing bootstrap's control label width?

Question

Bootstrap has the following CSS:

.form-horizontal .control-label {
  float: left;
  width: 160px;
  padding-top: 5px;
  text-align: right;
}

.form-horizontal .controls {
  *display: inline-block;
  *padding-left: 20px;
  margin-left: 180px;
  *margin-left: 0;
}

It makes my form look like this:

The labels are way off to the right.

Here is how I build the form:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="kez_header">


        <table class="style1">
           <tr>
               <td>
                   <h4> Add Group
                   </h4>
              </td>
               <td align="right" valign="middle">

               </td>
           </tr>
           </table>

             <div id="new_group_view" class="form-horizontal">
             <form class="form-horizontal" method="POST" action="/yourownpoet/web/app_dev.php/register/">
    <div class="control-group">
        <label class="control-label control-label-me required" for="fos_user_registration_form_email" placeholder="Email">Email:</label>
        <div class="controls">
            <input id="fos_user_registration_form_email" class="text-style" type="email" placeholder="Email" required="required" name="fos_user_registration_form[email]">
            <div placeholder="Password" id="fos_user_registration_form_plainPassword"></div>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label required" for="fos_user_registration_form_plainPassword_Enter Password: ">Enter password: </label>
        <div class="controls">
            <input type="password" required="required" name="fos_user_registration_form[plainPassword][Enter Password: ]" id="fos_user_registration_form_plainPassword_Enter Password: " class="text-style">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label required" for="fos_user_registration_form_plainPassword_Verify Password: ">Verify password: </label>
        <div class="controls">
            <input type="password" required="required" name="fos_user_registration_form[plainPassword][Verify Password: ]" id="fos_user_registration_form_plainPassword_Verify Password: " class="text-style">
        </div>
    </div>
</form>
             </div>
    </div>
</asp:Content>

How can I get this normal so that the labels start more like here: http://bootstrap.stage42.net/doc/forms

Thanks

Answer 1

.form-horizontal .control-label width specifies the "how far would be last character of the label text from the left side of the parent container".

.form-horizontal .controls margin-left specifies the "how far would be left border of the field from the left side of the parent container".

This is simplified explanation but should give you enough understanding to take control over your styles.

So you should adjust .form-horizontal .control-label width and .form-horizontal .controls margin-left values proportionally, to move fields and labels inside the container. Proportionally because "space" between label and field should be preserved. Here is example:

.form-horizontal .control-label {
  float: left;
  width: 120px; /* changed from 160px to 120px */
  padding-top: 5px;
  text-align: right;
}

.form-horizontal .controls {
  *display: inline-block;
  *padding-left: 20px;
  margin-left: 140px;  /* changed from 180px to 140px */
  *margin-left: 0;
}