I'm using Django
with CrispyForms
and I'm updating an old project of mine to BS3
.
The only thing I didn't find out how to adapt are form-horizontal
. My forms used to look like this:
Now the label is always on top of the input - like it was before with form-vertical
.
I read some posts on Stack, googled around but nobody has a working crispy answer for me!
The weirdest thing is that the Bootstrap guys say that they did not change or remove this class.
Any ideas what I can do to get my old, lovely horizontal` forms back?
Thanks!
Update:
CrispyForms
produces the following, even with bootstrap3
as template pack:
<div class="form-group" id="div_id_title">
<label class="control-label requiredField" for="id_title">Titel
<span class="asteriskField">*</span>
</label>
<div class="controls ">
<input type="text" name="title" maxlength="65" id="id_title" class="textinput textInput form-control">
</div>
</div>
Take a look here:
You should add
helper.label_class = 'col-lg-x' #for example 'col-lg-2'
helper.field_class = 'col-lg-x' #for example 'col-lg-10'
BS3 has a 12 column grid system, more info about that here http://getbootstrap.com/css/#grid
That made the form horizontal but unfortunately the labels align to the left, I'm trying to fix that now.
UPDATE: If you have issues with the vertical spacing between the fields add a row css class to the outer div of every field, the html output:
<div class="form-group row" id="div_id_title">
###labels HTML###
</div>
Probably a bug on the field.html template for bootstrap3.