Problem/Motivation
The "file" and "file_managed" render elements do not get bootstrap classes as per Bootstrap Examples. This results in poor styling of the file dialog (not bootstrap like).
Steps to reproduce
add a "file" oder "file_managed" element to your form or use for example a file upload widget somewhere (file field, image field, media).
Proposed resolution
add necessary classes via theme preprocessing
This would also help a bit with #3475403: Apply appropriate styling to Media Library by styling the file dialog there too.
This would conflict with #3476157: Checkboxes and radios should conform to Bootstrap examples as this MR also uses the preprocess_form_element hook. Either this MR or #3476157: Checkboxes and radios should conform to Bootstrap examples MR would have to be changed after the other MR is applied.
Remaining tasks
User interface changes
This is screenshot before:

This is screenshot after:

API changes
Data model changes
| Comment | File | Size | Author |
|---|---|---|---|
| file_after.jpg | 25.28 KB | stefan.korn | |
| file_before.jpg | 10.97 KB | stefan.korn |
Issue fork bootstrap5-3476481
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
stefan.kornComment #4
stefan.kornComment #6
jannakha commentedtested - works well!
thank you for your contribution.
Comment #8
vladimirausThank you all for your contributions. 🎂
Committed.