How to style a Django crispy-form label
I'm developing a small project using Django v5 and Bootstrap v5. At this stage I'm just playing around with the registration
and login
pages but I'd like to style the form using crispy-form
and the crispy FormHelper
. I can change the displayed label but (so far) I've been unable to make the label bold and/or underlined to show that it is a required field (rather than using crispy's asterisk).
For what it is worth here is my forms.py
file:
from django import forms
from django.contrib.auth import get_user_model
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Field, Layout
class LoginForm(forms.Form):
username = forms.CharField(widget=forms.TextInput(attrs={'autofocus': 'autofocus'}))
password = forms.CharField(widget = forms.PasswordInput)
class UserRegistrationForm(forms.ModelForm):
password = forms.CharField(
label = 'Password',
widget = forms.PasswordInput
)
password2 = forms.CharField(
label = 'Repeat password',
widget = forms.PasswordInput
)
class Meta:
model = get_user_model()
fields = ['username','email','first_name','last_name']
widgets = {
"username": forms.TextInput(attrs={'autofocus': 'autofocus'}),
}
def clean_password2(self):
cd = self.cleaned_data
if cd['password'] != cd['password2']:
raise forms.ValidationError("Passwords don't match!")
return cd['password2']
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.fields['username'].label= "User Name"
self.fields['username'].help_text= "This will be your Login ID and must be unique"
#self.helper.layout = Layout(
#Field('username', label='User Name - Doug', css_class="fs-2")
#)
self.helper.add_input(Submit('submit', 'Register'))
Note - the commented out section changes the style of the input
, not the label
.
and register.html
template
{% extends "registration/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<h2>Registration Form</h2>
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
{% crispy form %}
</fieldset>
<div class="pb-4">
<small class="text-muted">Required fields are marked by *</small>
</div>
</form>
</div>
{% endblock %}
How can I make the username label
(and other labels) bold
and underlined
, ideally using Bootstrap's fw-bold
class?