Formatting flask-wtf submit button using bootstrap

Question

I'm using jinja to render a flask-wtf submit button as follows:

{{ wtf.form_field(form.submit) }}

This results in a button formatted in btn-default bootstrap format (white). I'd like to change this to btn-success bootstrap format (green).

How can I achieve this?

Answer 1

As suggested by @dpgaspar the solution was to use button_map as follows:

{{ wtf.form_field(form.submit, button_map={'submit':'success'}) }}

Answer 2

If you are using wtf.quick_form, use the form like this.

{{ wtf.quick_form(form, button_map={'submit':'success'}) }}

Answer 3

I presume you are also using flask-bootstrap.

On the flask-bootstrap Jinja2 macros you have:

    {% call _hz_form_wrap(horizontal_columns, form_type, True, required=required) %}
    {{field(class='btn btn-%s' % button_map.get(field.name, 'default'), **kwargs)}}
    {% endcall %}

You should use if you can the button_map to do it [see details in comments below]

Answer 4

If you are using flask-bootstrap, use the form with button_map as suggested by @dpgaspar,

For whole form - wtf.quick_form:

{{wtf.quick_form(delete_form, button_map={'name_of_field': 'danger'})}}

For individual field, wtf.form_field:

{{wtf.form_field(delete_form.delete, button_map={'delete': 'success'})}}

Flask-Bootstrap official documentation says:

button_map – A dictionary, mapping button field names to names such as primary, danger or success. Buttons not found in the button_map will use the default type of button.