Render labels beneath inputs when using render_field()

[alenmeister]

I just recently implemented Bootstrap-Flask and love it so far. However, I always wrap my form fields in a div with class form-floating. And it seems to me like the current implementation renders the labels before inputs. Is there any way to change this behaviour?

[marmstr93ng]

I also would like this behaviour!

I have tried a number of different approaches but none have worked. For example, I can set the form_type to inline to hide the label that is before the input and add a bespoke label of my own below but the issue with this approach is that the form-floating class needs to be added to the form_group_classes parameter which means that the bespoke label is outside the group div tag.

The following creates the floating label but doesn't utilise bootstrap-flask (no validation).

<div class="row justify-content-center">
  <div class="col-4 form-floating mb-2 p-0">
    {{ form.username(class="form-control", placeholder="Username") }}
    {{ form.username.label(for='username') }}
  </div>
</div>

The following puts the renders the label above the input breaking the floating label

<div class="row justify-content-center">
  {{ render_field(form.username, placeholder="Username", form_group_classes="col-4 form-floating mb-2 p-0") }}
</div>