Django Forms and Bootstrap - CSS classes and <divs>

Question

I'm using Twitter Bootstrap with Django to render forms.

Bootstrap can format your forms quite nicely - as long as you have the CSS classes it expects included.

However, my issue is that the forms generated by Django's {{ form.as_p }} don't render well with Bootstrap, as they don't have these classes.

For example, the output from Django:

    <form class="horizontal-form" action="/contact/" method="post">         <div style='display:none'>             <input type='hidden' name='csrfmiddlewaretoken'                     value='26c39ab41e38cf6061367750ea8c2ea8'/>         </div>         <p><label for="id_name">Name:</label> <input id="id_name" type="text" name="name" value="FOOBAR" maxlength="20" /></p>         <p><label for="id_directory">Directory:</label> <input id="id_directory" type="text" name="directory" value="FOOBAR" maxlength="60" /></p>        <p><label for="id_comment">Comment:</label> <textarea id="id_comment" rows="10" cols="40" name="comment">Lorem ipsum dolor sic amet.</textarea></p>        <p>            <label for="id_server">Server:</label>            <select name="server" id="id_server">                <option value="">---------</option>                <option value="1"                     selected="selected">sydeqexcd01.au.db.com</option>                <option value="2">server1</option>                <option value="3">server2</option>                <option value="4">server3</option>            </select>        </p>        <input type="submit" value="Submit" />     </form> 

From what I can tell, Bootstrap requires that your forms has a <fieldset class="control-group">, each <label> has class="control-label", and each <input> is wrapped in a <div>:

<fieldset class="control-group">     <label class="control-label" for="input01">Text input</label>     <div class="controls">         <input type="text" class="xlarge" name="input01">         <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>     </div> </fieldset> 

However, adding custom CSS labels to every form field in Django is rather painful:

Add class to Django label_tag() output

Is there a smarter way of either using {{ form.as_p }}, or iterating through the fields, without having to manually specify things, or do a whole bunch of hackery?

Cheers, Victor

Answer 1

This is what I came up with:

<form class="form-horizontal" method="post">{% csrf_token %}     <fieldset>         <legend>{{ title }}</legend>         {% for field in form %}             {% if field.errors %}                 <div class="control-group error">                     <label class="control-label">{{ field.label }}</label>                      <div class="controls">{{ field }}                         <span class="help-inline">                             {% for error in  field.errors %}{{ error }}{% endfor %}                         </span>                     </div>                 </div>             {% else %}                 <div class="control-group">                     <label class="control-label">{{ field.label }}</label>                      <div class="controls">{{ field }}                         {% if field.help_text %}                             <p class="help-inline"><small>{{ field.help_text }}</small></p>                         {% endif %}                     </div>                 </div>             {% endif %}         {% endfor %}     </fieldset>     <div class="form-actions">         <button type="submit" class="btn btn-primary" >Submit</button>     </div> </form> 

Answer 2

I like to use "django-crispy-forms" which is the successor to django-uni-form. It's a great little API and has great support for Bootstrap.

I tend to use the template filters for quickly porting old code and quick forms, and the template tags when I need more control over the rendering.