[FIXED] Django Forms and bootstrap - adding widgets works but not fully

Issue

I have problem with bootstrap in my django forms. In forms I have this code:

make = forms.ChoiceField(choices=make_choices)
make.widget.attrs.update({'class': 'form-control'})

And in tutorials I saw that it should be enough to render proper bootstrap choice field.

But in my case it looks like this: Please notice:

• missing arrow indicating actual dropdown on the right
• grey select box is not wide enough, or rather box above is too wide?
• label "Make:" also doesn't look like proper bootstrap label.

I checkout out several tutorials but in all of them adding this "{'class': 'form-control'}" in attrs was enough. I was also experimenting with django crispy forms but they were also not fully correct. What am I missing? What I did wrong?

Solution

as of bootstrap 5 docs https://getbootstrap.com/docs/5.0/forms/select/#default you should use .form-select class to trigger the custom styles for <select> elements, so it should be

make.widget.attrs.update({'class': 'form-select'})

.form-control class is used for elements like <input> and <textarea>.

Answered By - cizario