Is there any method to add bootstrap style to Django password input field?

Question

I'm trying to add a registration page to my Django project and I have made the registration form in the forms.py file.

 
class createUserForm(UserCreationForm):
    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

        widgets = {
            'username' : forms.TextInput(attrs={'class':'form-control form-input','placeholder':'Username...'}),
            'email' : forms.EmailInput(attrs={'class':'form-control form-input','placeholder':'Email...'}),
            'password1' : forms.PasswordInput(attrs={'class':'form-control form-input','placeholder':'Password'}),
            'password2' : forms.PasswordInput(attrs={'class':'form-control form-input','placeholder':'Re-type password'}),

        }

HTML

Sign in
                
                    
                
                   {% csrf_token %}
                    
                    {{form.username}}
                
                    
                    {{form.email}}
                    
                    
                    {{form.password1}}
                    
                    
                    {{form.password2}}
                    
                        
                    
                    
                    
                        Already have an account?
  Log in

After rendering out HTML, bootstrap styles are not added to the password input fields. This is the screenshot of my output page.

user_10698741 · Answer

You don't have to send the bootstrap classes as attrs. Just use Crispy Forms

pip install django-crispy-forms

settings.py

INSTALLED_APPS = [
    ...
    "crispy_forms",
]

CRISPY_TEMPLATE_PACK = "bootstrap4"

HTML:

{% load crispy_forms_tags %}


    {{ my_formset|crispy }}

user_12114919 · Answer

But does the class appear in the source code? if it is showing, then your bootstrap file is not loading or you are using the wrong measurements

Anyway you can do a test, create something like this:

Put the code above on your page! Now place the form-a class in your and see if it renders with a green border and takes up all the available space, otherwise it means that the classes are not in the rendered source code (client side) and, therefore, there is another problem with your non-bootstrap-related code. If it's like I said, your bootstrap file is not loading or you are using the wrong classes for what you intend to do.

user_1394697 · Answer

There are several ways to skin this cat, but my preferred method is to use the django-bootstrap4 package: https://pypi.org/project/django-bootstrap4/

Install it in your venv: pip install django-bootstrap4
Add it to your INSTALLED_APPS:

INSTALLED_APPS = (
    # ...
    "bootstrap4",
    # ...
)

Use it in a template:

{% load bootstrap4 %}

Sign in

    
    {% csrf_token %}
    {% bootstrap_form form %}

It will automatically take care of displaying errors properly. If you need to do any custom actions for fields, you can also loop through the fields:

{% load bootstrap4 %}

Sign in

    
    {% csrf_token %}
    {% for field in form %}
        {% bootstrap_field field %}
    {% endfor %}

Good luck!

Is there any method to add bootstrap style to Django password input field?

3 Answers