How should I style Django validation errors with Bootstrap?

Question

When a form in Django has validation errors, the errors are given in a list with class errorlist.

Elements can be given an error style with Bootstrap by setting class="alert alert-error".

What is the best way to combine these, and use Bootstrap's error style for validation errors on Django forms?

Answer 1

In Twitter Bootstrap, input elements are enclosed between "control-group" div or fieldset. So I would do something like this in template

{%for field in form %}
<div class="control-group {%if field.errors %}error{%endif%}">
{# render your field #}
</div>
{% endfor %}

Note: In bootstrap, class="alert alert-error" seems to be for alert messages and not for field specific errors.

Answer 2

In Bootstrap 3, input elements are enclosed between "form-group" divs and the error class has changed to has-error.

{%for field in form %}
  <div class="form-group {%if field.errors %}has-error{%endif%}">
    {# render your field #}
  </div>
{% endfor %}