Bootstrap: form-horizontal not styling as expected

Question

I use twitter bootstrap and would like to have a horizontal shape, as shown in the demo: http://twitter.github.com/bootstrap/base-css.html#forms

However, I get a kind of vertical shape, I think, with the inscriptions on the control, I can not find why the style of the vertical shape does not work.

Here is the html code (generated using the 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'm doing wrong?

Answer 1

You need to apply the .control-label class to your labels and separate your inputs inside the .controls container .controls that your form styles apply correctly. Try 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>