I am using twitter bootstrap and would like to have a horizontal form as shown in the demo here: http://twitter.github.com/bootstrap/base-css.html#forms
However, I get a kind of vertical form I guess with labels over control, I can't find why the vertical form styling isn't working.
Here is the html code (generated with symfony2 framework:
<form class="form-horizontal" method="POST" action="/yourownpoet/web/app_dev.php/register/">
<label class=" required" for="fos_user_registration_form_email" placeholder="Email">Email:</label>
<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>
<label class=" required" for="fos_user_registration_form_plainPassword_Enter Password: ">Enter password: </label>
<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>
<label class=" required" for="fos_user_registration_form_plainPassword_Verify Password: ">Verify password: </label>
<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>
etc...
</form>
Is there something I am doing wrong?
You need to apply the .control-label
class to your labels and separate your inputs inside a .controls
container for your form styles to apply correctly. Try this instead:
<form class="form-horizontal" method="POST" action="/yourownpoet/web/app_dev.php/register/">
<div class="control-group">
<label class="control-label 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With