Applying bootsrap and custom css to {{form}} elements in django

Viewed 683

I am trying to apply CSS to individual {{form}} fields on my html template. I am referencing this solved question:

CSS styling in Django forms`

using the answer I created my forms.py page as follows:

from django import forms
from .models import ContactInfo


class ContactForm(forms.ModelForm):
# class meta brings in the fields from models
class Meta:
    model = ContactInfo

    # grab the fields from models ContactInfo class
    fields = ('Fullname')

    # specify which bootstrap class each html widget should take
    def __init__(self, *args, **kwargs):
        super(ContactForm, self).__init__(*args, **kwargs)
        self.fields['Fullname'].widget.attrs.update({'class': 'form-control'})

html using {{form}} elements:

<div class="form-group">
  <label for="id_Fullname">Full Name:</label>
  {{form.Fullname}}
</div>

The working html w/o usage of {{form}}:

<div class="form-group"> <label for="fullname">Full Name:</label> <input type="text" class="form-control" id="fullname"> </div>

How do I get the "label" tag to point to the id inside {{form.Fullname}}. My guess is it is not doing that right now hence it doesn't apply the css. That or the class i specified in the widgets in the forms.py is not working how I want it to.

3 Answers
Related