Django styling login forms and adding additional spans

Question

I have two questions in form-styling.

1. For my login, I am using Django's default auth features and haven't written any views or forms manually.

urls.py

urlpatterns += patterns(
    'django.contrib.auth.views',

    url(r'^login/$','login',
    {'template_name':'login.html'},
    name='qna_login'),

    url(r'^logout/$','logout',
    {'next_page':'qna_home'},
    name='qna_logout'),
    )

login.html

{% extends "base.html" %}
{% block content%}
{% if form.errors %}
<p class="text-warning"> Your username and/or password didn't match </p>
{% endif%}
<form role="form" class="form-horizontal" method="post" action="{% url 'django.contrib.auth.views.login' %}">
<div class="form-group">
{% csrf_token %}
{{ form }}
<input type="submit" class="btn btn-primary" value="login" />
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
{% endblock %}

How do I add bootstrap styling to it?

2. For new user registration, I have added some bootstrap specific styles, but need to add additional spans and replace the labels with Glyphicons.

forms.py

class UserForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput())
    class Meta:
        model = User
        fields = ('username', 'email', 'password')
    def __init__(self, *args, **kwargs):
        super(UserForm,self).__init__(*args,**kwargs)
        self.fields['username'].widget.attrs.update({'class':'form-control','placeholder':'Username'})
        self.fields['email'].widget.attrs.update({'class':'form-control','placeholder':'Email'})
        self.fields['password'].widget.attrs.update({'class':'form-control','placeholder':'Password'})

What I need to do is replace what is generated in the template, such as

<p><label for="id_username">Username:</label> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" type="text" /> <span class="helptext">Required. 30 characters or fewer. Letters, numbers and @/./+/-/_ characters</span></p>

by a custom bootstrap addon and glyphicon, like

<div class="input-group">
            <span class="input-group-addon" style="background-color:#b77b48; color:white"><span class="glyphicon glyphicon-user"></span></span>
            <input type="text" class="form-control" placeholder="Username">
        </div>

Solution

You can render each field individually instead of letting Django render the whole form with {{ form }}. You can write the template like this -

<form role="form" class="form-horizontal" method="post" action="{% url 'django.contrib.auth.views.login' %}">{% csrf_token %}
    <div class="form-group">
        {% for field in form %}
            <div class="input-group">
                <span class="input-group-addon" style="background-color:#b77b48; color:white"><span class="glyphicon glyphicon-user"></span></span>
                <input class="form-control" id="{{ field.id_for_label }}" maxlength="30" name="{{ field.html_name }}" value="{{ field.value }}" type="text" /> 
                {{ field.errors }}
            </div>
        {% endfor %}
        <input type="submit" class="btn btn-primary" value="login" />
        <input type="hidden" name="next" value="{{ next }}" />
    </div>
</form>

As always, like everything else, Django documentation has everything.