Adding styles to django.forms controls using Bootstrap

Question

I have a form in my HTML page which I am generating using Django's forms.Form class. I would like to apply styles to the html controls that get generated using Bootstrap. I found that Bootstrap applies styles to the form controls if they have certain class attribute e.g. form-control. I am including the form object in my template using form.as_p directive. Since there are no explicit html controls that I write in my html page, I don't know how to include the class attribute so that the styles are applied. Can you please help me solve this problem so that I can apply the Bootstrap styles to my form controls?

Thanks, Rakesh.

Árni St. Steinunnarson · Accepted Answer · 2014-11-13 14:32:44Z

1

The easiest way I found to handle this is using crispy-forms.

answered Nov 13, 2014 at 14:32

Árni St. Steinunnarson

1,62012 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cezar Over a year ago

That would be my answer to. Don't be a fool, use a tool :)

cor · Accepted Answer · 2014-11-18 13:46:29Z

0

You can define it with the widget. For example:

class SearchForm(forms.Form):
    q=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control', 'placeholder':'Search'}))

Another example using a ModelForm:

class SearchForm(ModelForm):
    class Meta:
        model = SearchField
        fields = ['name']
        widgets = {
            'name' = forms.TextInput(attrs={'class':'form-control'})
        }

edited Nov 18, 2014 at 13:46

answered Nov 13, 2014 at 15:36

cor

3,39329 silver badges48 bronze badges

1 Comment

Rakesh K Over a year ago

I have declared the fields of my form using 'model=MyModel' statement in the Meta class of the form class. How do I add the attributes in this case?

Muhammad Saeed Arabi · Accepted Answer · 2014-11-13 19:30:59Z

0

You can also specify the widget's class in the Form's __init__ like the following. This is useful when you have a ModelForm and you don't want to override the default widgets or fields.

class SearchForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(SearchForm, self).__init__(*args, **kwargs)
        self.fields['q'].widget.attrs = {'class': 'form-control'}

    class Meta:
        model = SearchQuery
        fields = ('q',)

answered Nov 13, 2014 at 19:30

Muhammad Saeed Arabi

662 bronze badges

Collectives™ on Stack Overflow

Adding styles to django.forms controls using Bootstrap

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related