Support #10871

Bootstrap 5 Forms with floating labels are not corretcly rendered with progressive-bootstrap=true

Added by Stefan Bn 10 months ago. Updated 3 months ago.

Target version:
Start date:
Due date:
% Done:


Estimated time:


The small attached sample 'main.cpp' demonstrates the problem:

When using Bootstrap 5 floating labels on several form fields, the first form field is not rendered correctly. See image attached 'FloatingLabels_Bug.png'.

I figured out that this behavior depends on this flag in wt_config.xml:


When progressive-bootstrap is set to true, the bug occurs.
When progressive-bootstrap is set to false, all form fields are rendered correctly.

This referes to Wt 4.8.0 build with clang64 on Windows 10 and Firefox/Edge.


main.cpp (2.23 KB) main.cpp Stefan Bn, 08/26/2022 02:01 PM
FloatingLabels_Bug.PNG (5.83 KB) FloatingLabels_Bug.PNG Stefan Bn, 08/26/2022 02:02 PM
bs5_forms.cpp (2.03 KB) bs5_forms.cpp Roel Standaert, 03/10/2023 02:31 PM

Updated by Roel Standaert 9 months ago

  • Target version set to 4.9.0

Updated by Roel Standaert 8 months ago

  • Target version changed from 4.9.0 to 4.10.0

Updated by Roel Standaert 3 months ago

  • File bs5_forms.cpp bs5_forms.cpp added
  • Tracker changed from Bug to Support
  • Status changed from New to Closed
  • Target version deleted (4.10.0)

The problem is simply that you are using a <form> tag in your template.

<form>s can't be nested, and Wt without JavaScript (e.g. when using progressive bootstrap) automatically adds a <form> tag around the entire page.

Just change your <form> to a <div>.

Another issue in your sample: you are reusing the same id. You should use the id function instead so that Wt can dynamically add the right id to the for attribute of the <label>.

I attached a fixed version of your code.

Also available in: Atom PDF