Applying css styles to form items in Django

Question

I have the following form in forms.py

from django import forms
class LoginForm(forms.Form):
    username = forms.CharField()
    password = forms.CharField(label='Password', widget=forms.PasswordInput)

In my templates/login.html file I have the following:

{% load staticfiles %}

<div>
     <form action="" method="post" style="">
            {% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="SignIn">
     </form>
</div>

I want use the bootstrap tool for the ui, [ http://getbootstrap.com/examples/signin/] for which I will should load some js and css static files inside login.html

How to can I apply the css effects to my login form, when I get the form just with the template tag {{ form.as_p }} ?

Answer 1

This is easy to do in class based forms. Example from my project where form-control is a css class.

from django.forms import ModelForm, TextInput

class ServerForm(ModelForm):

    class Meta:
        model = Server
        fields = ['name', 'ip', 'port']
        widgets = {
            'name': TextInput(attrs={'class': 'form-control'}),
            'ip': TextInput(attrs={'class': "form-control"}),
            'port': TextInput(attrs={'class': 'form-control'}),
            }

Then the template I have looks like:

{% for field in form %}
    <div class="form-group">
        {{ field.label_tag }} {{ field }}
    </div>
{% endfor %}

Which generates

<form method="POST">
    <input type="hidden" name="csrfmiddlewaretoken" value="xxxxxx">
    <div class="form-group">
        <label for="id_name">Name:</label>
        <input class="form-control" id="id_name" maxlength="64" name="name" type="text">
    </div>
    <div class="form-group">
        <label for="id_ip">Ip:</label>
        <input class="form-control" id="id_ip" maxlength="20" name="ip" type="text">
    </div>
    <div class="form-group">
        <label for="id_port">Port:</label> <input class="form-control" id="id_port" name="port" type="text">
    </div>
    <div class="form-group">
        <button type="submit" class="save btn btn-default">Add/Edit Server</button>
    </div>
</form>

The key is the widgets field of the Meta class. In there you can define which widget from django.forms you want to use, then can define whatever attrs you want. Here we use 'class' and set its argument to 'form-control'. You could easily substitute as many css classes as you wanted, ie

'name': TextInput(attrs={'class': 'form-control xs my-other-css-class'}),

I use this with bootstrap frequently and it works fine, so long as you import bootstrap somewhere along the line (either from the django-bootstrap plugin, or just through static files in your base template)

Answer 2

There is a great package used for customizing the display of form widgets called django-widget-tweaks . The package lets you customize css classes and attributes.

Instead of using form.as_p you can access each item individually and use the render_field tag to add css classes.

{% load widget_tweaks %}

{% for field in form %}
    {% render_field field class+="css_class_1 css_class_2" %}
{% endfor %}

Or use custom filters included in the package for compactness:

{% load widget_tweaks %}

{% for field in form %}
    {{ field|add_class:"my-css-class" }}
{% endfor %}

Or without a loop:

{% load widget_tweaks %}

{% render_field form.name class+="css_class_1 css_class_2" %}
{% render_field form.email class+="css_class_1 other_class" %}
{% render_field form.title class+="css_class_1 css_class_3" %}