Add Bootstrap to Inbulit Login View Django

Question

I am using the default view for logging the users.So I have not made any modelForm for it.So I am not able to provide any bootstrap class to the input fields i.e username and password. So my login form is looking ugly.Is there anyway. I want to add bootstrap class form-control to the input fields username and password.

Following is my HTML and URL snippets. All functions and classes used have their modules imported.

urls.py

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

login.html

<form class="form-signin" method="post"><span class="reauth-email"> </span>
        {% csrf_token %}
        <!--{{form.as_p}}-->
        {% for field in form %}
            <div class="fieldWrapper">
                {{ field.errors }}
                {{ field.label_tag }} {{ field }}
                {% if field.help_text %}
                    <p class="help">{{ field.help_text|safe }}</p>
                {% endif %}
            </div>
        {% endfor %}
        <!--<input class="form-control" type="email" required="" placeholder="Email address" autofocus="" id="inputEmail">-->
        <!--<input class="form-control" type="password" required="" placeholder="Password" id="inputPassword">-->
        <div class="checkbox">
            <div class="checkbox">
                <label><input type="checkbox">Remember me</label>
            </div>
        </div>
        <button class="btn btn-primary btn-block btn-lg btn-signin" type="submit">Sign in</button>
    </form>

I think the following question (and answers) might address your doubt or at least give you a few hints on how to solve your issue (adding html attributes to your form widgets): https://stackoverflow.com/questions/5827590/css-styling-in-django-forms — dethos, Nov 09 '17 at 19:25

score 4 · Accepted Answer · answered Nov 09 '17 at 19:47

change your login template to this

you can modify it

<div  class="center-block" id="login" style="width: 40%;">
    <form class="form-horizontal form" name="LoginForm"  method="post">
    {% csrf_token %}
    {% if next %}
        <input type="hidden" name="next" value="{{ next }}" />
    {% endif %}
    <div class="control-group">
        <label class="control-label" for="username">Username</label>
        <div class="controls">
            <input class="form-control" type="text" id="username" name="username"  placeholder="Username">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="password">Password</label>
        <div class="controls">
            <input class="form-control" type="password" name="password" id="password" placeholder="Password">
        </div>
  </div><br>
  <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn btn-success">Login</button><a href="{% url 'signup' %}"> or sign up</a>
        </div>
    </div>
    </form>
</div>

What is the procedure if I want to display field errors.? – Rohan Piplani Nov 09 '17 at 20:09 — Rohan Piplani, Nov 09 '17 at 20:09

cMeIIIHo · Answer 2 · 2017-11-09T19:39:15.317

If you want to add a CSS-class, you can write a custom template filter

First, read how to make a custom template filter https://docs.djangoproject.com/en/1.11/howto/custom-template-tags/#writing-custom-template-filters

You'll have write here

my_app/
__init__.py
models.py
templatetags/
    __init__.py
    my_app_extra_filters.py        # <-----------------
views.py

smth like this

my_app_extra_filters.py

from django import template
register = template.Library()


@register.filter
def add_class(modelform_input, css_class):
    return modelform_input.as_widget(attrs={'class': css_class})

*if you want to know about as_widget() method, used above: https://docs.djangoproject.com/en/1.11/ref/forms/api/#django.forms.BoundField.as_widget

then use it in the template

{% load my_app_extra_filters %}
...
{{ field.errors }}
{{ field.label_tag }}
{{ field|add_class:'bootstrap_class_name' }}

score 0 · Answer 3 · answered May 08 '20 at 15:55

all you need is add this codes to your loginform in form.py

class AuthenticationForm(AuthenticationForm):
     .
     .
     .

     def __init__(self, *args, **kwargs):
            super(UserCreationForm, self).__init__(*args, **kwargs)
            for fieldname in ['username', 'password1', 'password2',]:
                self.fields[fieldname].widget.attrs = {'class':'form-control'}

Add Bootstrap to Inbulit Login View Django

3 Answers3