Implementation of bootstrap 3 to django project

Question

I work for the implementation of bootstrap 3 encountered a problem in the forms.

<form class="form-horizontal" action="" method="post">
    {% csrf_token %}

    {% for field in form %}
        <div class="form-group {% if field.errors %} error{% endif %}{% if field.required %} required{% endif %}">
            <label class="col-sm-2 control-label" for="{{ field.id_for_label }}">{{ field.label_tag }}</label>
                {{ field }}
                    {% for error in field.errors %}
                    <p class="help-block">{{ error }}</p>
                    {% endfor %}
        </div>
    {% endfor %}
</form>

input has no class = "form-control" so the form is not displayed correctly. How to fix it?

Answer 1

Indeed this happens with default Django form widgets. You have the following possibilites in order of complexity:

• Build custom form widgets
• Override the widget's attributes

• Use jQuery to apply any custom attributes universally: eg:

  $('input[type="text"], input[type="email"], input[type="url"], select').addClass('form-control');
  

The last one is kind of cumbersome but effective and you do not very much care if JS is disabled since this affects style and not functionality.

Answer 2

Look on django-crispy-forms http://django-crispy-forms.readthedocs.org/en/latest/install.html. It is easy way to integration django project with bootstrap 3