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. enter image description here How to fix it?

Community · Accepted Answer · 2017-05-23 12:23:54Z

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.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered May 25, 2015 at 10:08

Wtower

20.1k12 gold badges110 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

myarik · Accepted Answer · 2015-05-25 12:08:24Z

1

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

answered May 25, 2015 at 12:08

myarik

313 bronze badges

Collectives™ on Stack Overflow

Implementation of bootstrap 3 to django project

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related