How to Style Django Forms with Widgets and Bootstrap

Every Django developer knows the benefits of Django forms, but styling them—adding CSS classes or custom attributes—can be confusing at first.

What are widgets?

Widgets are Django's representation of HTML input elements. They handle rendering of HTML and extract data from the corresponding GET/POST dictionaries. For example, a CharField uses the default TextInput widget, which renders as <input type="text">.

Simple Form example

Consider a basic form that collects a user's name and email:

from django import forms

class UserInfoForm(forms.Form):
    name = forms.CharField()
    email = forms.EmailField()

The generated HTML looks like this:

<div class="container">
  <h1>Form</h1>
  <form action="{% url 'index' %}" method="post">
    {% csrf_token %}
    <div class="form-group">{{ form }}</div>
    <input class="btn btn-success" type="submit" value="Submit">
  </form>
</div>

By default the form has no styling and appears plain.

Adding Bootstrap classes

You can add a Bootstrap class by specifying it in the widget's attrs dictionary:

from django import forms
from django.forms import TextInput, EmailInput

class UserInfoForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs={
        'placeholder': 'Name',
        'style': 'width: 300px;',
        'class': 'form-control'
    }))
    email = forms.EmailField(widget=forms.EmailInput(attrs={
        'placeholder': 'Email',
        'style': 'width: 300px;',
        'class': 'form-control'
    }))

The rendered form now uses Bootstrap's form-control class, producing a cleaner look.

Using ModelForm with widgets

When a form is tied to a model, define a Meta class and specify widgets for each field:

from django import forms
from django.forms import ModelForm, TextInput, EmailInput
from .models import User

class UserInfoForm(ModelForm):
    class Meta:
        model = User
        fields = ['name', 'email']
        widgets = {
            'name': TextInput(attrs={
                'class': 'form-control',
                'style': 'max-width: 300px;',
                'placeholder': 'Name'
            }),
            'email': EmailInput(attrs={
                'class': 'form-control',
                'style': 'max-width: 300px;',
                'placeholder': 'Email'
            })
        }

The resulting HTML renders each field with the specified Bootstrap classes while being linked to the User model.

Conclusion

Understanding and customizing Django widgets makes it easy to improve the appearance of forms, and adding Bootstrap classes is straightforward, giving you a polished, responsive user interface.