Blog / 2015 / November / 15

Django Forms and Bootstrap

November 15, 2015

I wanted to render a Django form in such a way that it would render nicely in bootstrap.

The following code will render a django form (in this case EntryForm) as nice bootstrap styled html

<form action="." method="post" enctype="multipart/form-data" class="form-horizontal">
{%csrf_token%}
  <fieldset>
        {% for field in EntryForm %}
            {% 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>

References

Tags: django bootstrap form html css