0

I'm attempting to apply bootstrap to a django login form. I have scoured google for hours and pretty much everyone is saying the same thing, which is to set the custom authentication_form in urls.py, override the username and password fields in custom login form and pass the class through the widget's attrs parameter. I have done this but django still isn't applying the form-control class to my input fields. I'm not quite sure what is going wrong. The form still renders, but without applying the bootstrap styling.

urls.py

from django.conf.urls import url
from django.contrib.auth.views import LoginView, LogoutView, 
    PasswordChangeView, PasswordChangeDoneView, \
    PasswordResetView, PasswordResetDoneView, 
    PasswordResetConfirmView, PasswordResetCompleteView

from account.forms import LoginForm
from account.views import dashboard

urlpatterns = [
    url(r'^$', dashboard, name='dashboard'),
    url(r'^login/$', LoginView.as_view(), {'authentication_form': 
        LoginForm}, name='login'),
    url(r'^logout/$', LogoutView.as_view(), name='logout'),
    url(r'^password-change/$', PasswordChangeView.as_view(), 
        name='password_change'),
    url(r'^password-change/done/$', PasswordChangeDoneView.as_view(), 
        name='password_change_done'),
    url(r'^password-reset/$', PasswordResetView.as_view(), 
        name='password_reset'),
    url(r'^password-reset/done/$', PasswordResetDoneView.as_view(), 
        name='password_reset_done'),
    url(r'^password-reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-
        Za-z]{1,13}-[0-9A-Za-z]{1,20})/$',
        PasswordResetConfirmView.as_view(), 
        name='password_reset_confirm'),
    url(r'^password-reset/complete/$', 
        PasswordResetCompleteView.as_view(), 
        name='password_reset_complete')
]

forms.py

from django.contrib.auth.forms import AuthenticationForm
from django.forms import CharField, TextInput, PasswordInput


class LoginForm(AuthenticationForm):
    username = CharField(widget=TextInput(attrs={'class': 'form-
    control'}))
password = CharField(widget=PasswordInput(attrs={'class': 'form-
    control'}))

views.py

@login_required(
    redirect_field_name=reverse_lazy('login'),
    login_url=reverse_lazy('login'))
def dashboard(request):
    return render(request, 'account/dashboard.html', {'section': 
        'dashboard'})

login form

Dylan Meadows
  • 3
  • 3
  • where is the form validation in views.py? you need to check if the form is valid and then save the data. – hansTheFranz Jul 11 '17 at 01:11
  • @hasTheFranz I had that in there at one point, but took it out when trying to fix the styling issue – Dylan Meadows Jul 11 '17 at 01:15
  • yeah get it back in. Without that your form will never work. Is the form even showing up in the template? you use `{{form}}` in the template? – hansTheFranz Jul 11 '17 at 01:22
  • @hansTheFranz I was mistaken. One of the routes I went down was to define a custom view that extended `django.views.generic.FormView` in views.py. The custom view had overridden form_valid. Most of the examples I saw for the LoginForm didn't implement is_valid. I don't understand how that is going to cause the style class to be added to the rendered form. – Dylan Meadows Jul 11 '17 at 01:23
  • @hansTheFranz yeah the form is displaying. I'll add a screenshot. – Dylan Meadows Jul 11 '17 at 01:23
  • oh man im so sorry I completely misread your question I thought your problem is that your form is not validating. Your title is a bit misleading. So the best thing to do when you want to style is using widget tweaks. – hansTheFranz Jul 11 '17 at 01:30
  • 1
    @hansTheFranz I updated the title to reflect the topic better. It's my first question :) So this is for my final project for my summer Internet Programming class and I wanted to eliminate using dependencies outside of django (except for bootstrap which is accessed through CDN) so that my project is pretty much self-contained. – Dylan Meadows Jul 11 '17 at 01:35
  • I will post an answer and hope that it fits your needs but I'm to tired right now since its 3:30 am where I live.if it does not work I will help you tomorrow. Or probably somebody will already have fixed this ;) – hansTheFranz Jul 11 '17 at 01:37

1 Answers1

0

In my templates I use Widget Tweaks 

<form method='POST' action="/" enctype='multipart/form-data'>
 {% load widget_tweaks %}
 {% csrf_token %}
 {{ form.first_name |add_class:"customCSS1 customCSS2" }}
 {{ form.second_name |add_class:"form-control customCSS4" }}
</form>
{{ form.media.js }}

with this plugin you can style the form as you wish. You could add your form-control class or use a personal CSS class like

.customCSS1{
  width60%;
  border-radius:5px;
 }
hansTheFranz
  • 2,511
  • 4
  • 19
  • 35