Applying bootstrap styles to django forms

Question

I want to use bootstrap to get a decent website design, unfortunately I don't know how style the form fields. I am talking about this:

<form class="form-horizontal" method="POST" action="."> {% csrf_token %}
  {{ form.title.label }}
  {{ form.title }}
</form>

How is one supposed to design this?? I tried this:

<form class="form-horizontal" method="POST" action="."> {% csrf_token %}
  <div class="form-control">
    {{ form.title.label }}
    {{ form.title }}
  </div>
</form>

This obviously didn't gave me the wanted results.

How can I apply bootstrap styles to django forms?

django-bootstrap3 will really make your life easier. github.com/dyve/django-bootstrap3 — Quaker
– Quaker, Commented Oct 7, 2015 at 8:03

Sayse · Accepted Answer · 2015-10-07 08:09:20Z

12

If you prefer not to use 3rd party tools then essentially you need to add attributes to your classes, I prefer to do this by having a base class that my model forms inherit from

class BootstrapModelForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super(BootstrapModelForm, self).__init__(*args, **kwargs)
        for field in iter(self.fields):
            self.fields[field].widget.attrs.update({
                'class': 'form-control'
            })

Can easily be adjusted... but as you see all my field widgets get the form-control css class applied

You can extend this for specific fields if you wish, here's an example of an inherited form having an attribute applied

class MyForm(BootstrapModelForm):
    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['name'].widget.attrs.update({'placeholder': 'Enter a name'})

edited Oct 7, 2015 at 8:09

answered Oct 7, 2015 at 8:04

Sayse

43.4k14 gold badges85 silver badges150 bronze badges

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

4 Comments

Foo Bar Over a year ago

Well this is really cool! I don't like using 3 party tools but sticking more to the framework! I love it, thank you

Sayse Over a year ago

@FooBar - No worries, enjoy! :)

Jeannie Over a year ago

this class would go into my forms.py file? noob question, i know. i just started learning django so i'm not 100% sure...

Sayse Over a year ago

@Jeannie yea you can put it anywhere that makes sense really. You can import it throughout your projects as required

Collectives™ on Stack Overflow

Applying bootstrap styles to django forms

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related