Flask-security and Bootstrap

Question

How can I style my Flask-security login site with Bootstrap? The html form looks like this:

<form action="{{ url_for_security('login') }}" method="POST" name="login_form">
  {{ login_user_form.hidden_tag() }}
  {{ render_field_with_errors(login_user_form.email) }}
  {{ render_field_with_errors(login_user_form.password) }}
  {{ render_field_with_errors(login_user_form.remember) }}
  {{ render_field(login_user_form.next) }}
  {{ render_field(login_user_form.submit) }}
</form>

Bootstrap is implemented, but I dont know how to edit the fields and the submit button..

Answer 1

The render_field_* functions accepts a class_ parameter, which will add HTML classes to the field. Add in bootstrap styling classes as you want.

render_field_with_errors(login_user_form.email, class_="form-control") }}
{{ render_field(login_user_form.submit, class_="btn btn-default") }}

And so on.

Answer 2

Flask-Security uses Flask-WTForms to render and validate forms. In Flask-Security 1.7.5, the default render_field_with_errors and render_field macros defined in "security/_macros.html" are

{% macro render_field_with_errors(field) %}
  <p>
    {{ field.label }} {{ field(**kwargs)|safe }}
    {% if field.errors %}
      <ul>
      {% for error in field.errors %}
        <li>{{ error }}</li>
      {% endfor %}
      </ul>
    {% endif %}
  </p>
{% endmacro %}

{% macro render_field(field) %}
  <p>{{ field(**kwargs)|safe }}</p>
{% endmacro %}

According to the Flask-WTForms 0.10 docs, both of the above macro functions accept ...

... keyword arguments that are forwarded to WTForm’s field function that renders the field for us. The keyword arguments will be inserted as HTML attributes.

Specifically, the lines {{ field(**kwargs)|safe }} pass the HTML escaped keyword arguments to the field function. Therefore, you can add classes,

{{ render_field_with_errors(login_user_form.email, class="form-control") }}

and can also overwrite default HTML attributes,

{{ render_field_with_errors(login_user_form.email, 
    class="form-control", type="email", placeholder="Enter email") }}
{{ render_field(login_user_form.submit, class="btn btn-default", value="Submit" ) }}

Additionally, you can define your own macros by modifying the macros above. For example, if you wanted to use Bootstrap alerts to render form validation errors, you could define the macro function render_field_with_bootstrap_errors

{% macro render_field_with_bootstrap_errors(field) %}
  <p>
    {{ field.label }} {{ field(**kwargs)|safe }}
    {% if field.errors %}
      {% for error in field.errors %}
        <div class="alert alert-danger" role="alert">{{ error }}</div>
      {% endfor %}
    {% endif %}
  </p>
{% endmacro %}

Adding your own macro is pretty simple. For example, you can put custom macros in a "custom_macros.html" file within the templates directory and then load the functions into templates with

{% from "custom_macros.html" import render_field_with_bootstrap_errors %}

This way, it is easy to modify the macros to use different Bootstrap features.