widget css Attribute not updating Authentication form django 2.1

Question

Sorry for stupid question as i am new to programming. (Start out as a hobby and now starting a project to replace work-related task rather than using excel)

trying to customize user model and extending django user models and authenication form but not updating.

would prefer to use django programming to resolve the issue so as to learn more about django. (not looking at jquery override, not looking at widget-teaks)

users/forms.py

from django import forms
from django.contrib.auth.forms import AuthenticationForm
from .models import CustomUser

class CustomLoginForm(AuthenticationForm):

    class Meta:
        model: CustomUser
        widgets = {
            'username': forms.EmailInput(attrs={'class': 'form-control'}),
            'password': forms.PasswordInput(attrs={'class': 'form-control'}),
        }

urls.py

from django.contrib import admin
from django.urls import path,include
from django.conf import settings
from django.conf.urls.static import static
from users.forms import CustomLoginForm
from django.contrib.auth import views as auth_views    

urlpatterns = [
    path('admin/', admin.site.urls),
    path('organisation/', include('organisation.urls')),
    path('users/', include('django.contrib.auth.urls')),
    path('users/login', auth_views.LoginView.as_view(template_name='registration/login.html',form_class='CustomLoginForm'), name ='login'),

HTML

<div class="card-body">
    <form action="{% url 'login' %}" method="post">
        {% csrf_token %}
        <div class="form-group mb-3">
            <label>{{ form.username.label_tag }}</label>
            <div class="input-group">
                {{ form.username }}
                <span class="input-group-append">
                    <span class="input-group-text">
                        <i class="fas fa-user"></i>
                    </span>
                </span>
            </div>
        </div>

        <div class="form-group mb-3">
            <div class="clearfix">
                <label class="float-left">{{ form.password.label_tag }}</label>
                <a href="pages-recover-password.html" class="float-right">Lost Password?</a>
            </div>
            <div class="input-group">
                {{ form.password }}
                <span class="input-group-append">
                    <span class="input-group-text">
                        <i class="fas fa-lock"></i>
                    </span>
                </span>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-8">
                <div class="checkbox-custom checkbox-default">
                    <input id="RememberMe" name="rememberme" type="checkbox"/>
                    <label for="RememberMe">Remember Me</label>
                </div>
            </div>
            <div class="col-sm-4 text-right">
                <button type="submit" class="btn btn-primary mt-2">Sign In</button>
            </div>
        </div>