Databases
StackOverflow2013
Postsdbo
PODjango Forms and Bootstrap - CSS classes and <divs>
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODjango Forms and Bootstrap - CSS classes and <divs>
    text
    copied!<p>I'm using <a href="https://github.com/twitter/bootstrap/tree/2.0-wip" rel="nofollow noreferrer">Twitter Bootstrap</a> with Django to render forms.</p> <p><code>Bootstrap</code> can format your forms quite nicely - as long as you have the <code>CSS</code> classes it expects included.</p> <p>However, my issue is that the forms generated by Django's <code>{{ form.as_p }}</code> don't render well with Bootstrap, as they don't have these classes. </p> <p>For example, the output from Django:</p> <pre><code> &lt;form class="horizontal-form" action="/contact/" method="post"&gt; &lt;div style='display:none'&gt; &lt;input type='hidden' name='csrfmiddlewaretoken' value='26c39ab41e38cf6061367750ea8c2ea8'/&gt; &lt;/div&gt; &lt;p&gt;&lt;label for="id_name"&gt;Name:&lt;/label&gt; &lt;input id="id_name" type="text" name="name" value="FOOBAR" maxlength="20" /&gt;&lt;/p&gt; &lt;p&gt;&lt;label for="id_directory"&gt;Directory:&lt;/label&gt; &lt;input id="id_directory" type="text" name="directory" value="FOOBAR" maxlength="60" /&gt;&lt;/p&gt; &lt;p&gt;&lt;label for="id_comment"&gt;Comment:&lt;/label&gt; &lt;textarea id="id_comment" rows="10" cols="40" name="comment"&gt;Lorem ipsum dolor sic amet.&lt;/textarea&gt;&lt;/p&gt; &lt;p&gt; &lt;label for="id_server"&gt;Server:&lt;/label&gt; &lt;select name="server" id="id_server"&gt; &lt;option value=""&gt;---------&lt;/option&gt; &lt;option value="1" selected="selected"&gt;sydeqexcd01.au.db.com&lt;/option&gt; &lt;option value="2"&gt;server1&lt;/option&gt; &lt;option value="3"&gt;server2&lt;/option&gt; &lt;option value="4"&gt;server3&lt;/option&gt; &lt;/select&gt; &lt;/p&gt; &lt;input type="submit" value="Submit" /&gt; &lt;/form&gt; </code></pre> <p>From what I can tell, Bootstrap requires that your forms has a <code>&lt;fieldset class="control-group"&gt;</code>, each <code>&lt;label&gt;</code> has <code>class="control-label"</code>, and each <code>&lt;input&gt;</code> is wrapped in a <code>&lt;div&gt;</code>:</p> <pre><code>&lt;fieldset class="control-group"&gt; &lt;label class="control-label" for="input01"&gt;Text input&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" class="xlarge" name="input01"&gt; &lt;p class="help-text"&gt;Help text here. Be sure to fill this out like so, or else!&lt;/p&gt; &lt;/div&gt; &lt;/fieldset&gt; </code></pre> <p>However, adding custom CSS labels to every form field in Django is rather painful:</p> <p><a href="https://stackoverflow.com/questions/414679/add-class-to-django-label-tag-output">Add class to Django label_tag() output</a> </p> <p>Is there a smarter way of either using <code>{{ form.as_p }}</code>, or iterating through the fields, without having to manually specify things, or do a whole bunch of hackery?</p> <p>Cheers, Victor</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