Databases
StackOverflow2013
Postsdbo
POChanging bootstrap's control label width?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging bootstrap's control label width?
    text
    copied!<p>Bootstrap has the following CSS:</p> <pre><code>.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; } </code></pre> <p>It makes my form look like this:</p> <p><img src="https://i.stack.imgur.com/IznQB.png" alt="enter image description here"></p> <p>The labels are way off to the right.</p> <p>Here is how I build the form:</p> <pre><code>&lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&gt; &lt;div id="kez_header"&gt; &lt;table class="style1"&gt; &lt;tr&gt; &lt;td&gt; &lt;h4&gt; Add Group &lt;/h4&gt; &lt;/td&gt; &lt;td align="right" valign="middle"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div id="new_group_view" class="form-horizontal"&gt; &lt;form class="form-horizontal" method="POST" action="/yourownpoet/web/app_dev.php/register/"&gt; &lt;div class="control-group"&gt; &lt;label class="control-label control-label-me required" for="fos_user_registration_form_email" placeholder="Email"&gt;Email:&lt;/label&gt; &lt;div class="controls"&gt; &lt;input id="fos_user_registration_form_email" class="text-style" type="email" placeholder="Email" required="required" name="fos_user_registration_form[email]"&gt; &lt;div placeholder="Password" id="fos_user_registration_form_plainPassword"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;label class="control-label required" for="fos_user_registration_form_plainPassword_Enter Password: "&gt;Enter password: &lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="password" required="required" name="fos_user_registration_form[plainPassword][Enter Password: ]" id="fos_user_registration_form_plainPassword_Enter Password: " class="text-style"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;label class="control-label required" for="fos_user_registration_form_plainPassword_Verify Password: "&gt;Verify password: &lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="password" required="required" name="fos_user_registration_form[plainPassword][Verify Password: ]" id="fos_user_registration_form_plainPassword_Verify Password: " class="text-style"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/asp:Content&gt; </code></pre> <p>How can I get this normal so that the labels start more like here: <a href="http://bootstrap.stage42.net/doc/forms" rel="noreferrer">http://bootstrap.stage42.net/doc/forms</a></p> <p>Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload