Search code examples
cssjinja2flask-wtformsbootstrap-5

Bootstrap not rendering Flask-WTForms QuerySelectField as HTML <select>


I'm trying to build a Flask form with one field being a QuerySelectField. Everything works, except that Bootstrap is rendering the <select> to look like a text input field.

When I look at my page source, I see that the field is rendering as <select class="form-control"...>. If I've read the Bootstrap docs aright, I need to change this to <select class="form-select...>. I've tried putting both render_kw={'class': 'form-select'} and extra_classes='form-select' in my form class, but the latter throws an Unexpected Keyword exception and the former seems to be ignored.

How do I get my SelectField to render as a <select> field?


Solution

  • I resolved this problem by switching from Flask-Bootstrap to Bootstrap-Flask, as the former has not been updated for several years. This also required changing {% import "bootstrap/wtf.html" as wtf %} to {% import "bootstrap/form.html" as wtf %} in my templates, as well as replacing calls to wtf.quick_form() with calls to wtf.render_form().