Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
Bootstrap provides examples on how to implement checkboxes and radios. Bootstrap5 theme should adhere to these examples if checkboxes and radios are created through regular Drupal form elements (type checkbox and radio). Currently some of the classes given by Bootstrap examples are missing.
Especially there are missing:
- form-check-label class on checkbox and radio label
- form-check-input class on radio input
- form-check class on the wrapper for checkbox and radio
Additionally there is a CSS margin set especially for description inside a checkbox and radio markup, which does not make sense imho.
Steps to reproduce
Create a checkbox and radio form element and check the markup.
Compare with what is given by https://getbootstrap.com/docs/5.3/forms/checks-radios/
Proposed resolution
Add classes via theme preprocessing and remove unnecessary CSS margin.
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | after-html.png | 78.42 KB | jannakha |
| #4 | after.png | 36.78 KB | jannakha |
| #4 | before.png | 36.23 KB | jannakha |
Issue fork bootstrap5-3476157
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:
- 3476157-checkboxes-and-radios
changes, plain diff MR !76 - 3476481-file-and-file compare
Comments
Comment #3
stefan.kornComment #4
jannakha commented@stefan.korn thanks for your contribution!
After application of patch:
+ HTML has required classes:
+ removed margin on description:
before:
after:
Unfortunately,
css/componentsis a volatile folder and can be overwritten by updates coming fromweb/core/themes/starterkit_theme/css/components(see Starterkit theme - Tracking upstream changes)Please make changes to scss in
web/themes/contrib/bootstrap5/scss/drupal/_forms.scssComment #5
stefan.korn@jannakha: thanks for reviewing this.
Regarding css/components/form.css: We could do the changes instead in scss/drupal/_forms.scss, but this does have some caveats too I suppose. One would need to overwrite the CSS from form.css in forms.scss, maybe something like
margin-left: inherit;. While this is possible, seems not to be the cleanest way.In addition this would somehow still depend on form.css. If for example the CSS selectors are changed in form.css, the fix in forms.scss might not apply anymore. This is kind of a hidden dependency.
So maybe think about if you might not still prefer the way via form.css. Maybe one could add a line with comment like "removed unnecessary margin for description" and then if you incorporate upstream changes from starterkit you would see this line in a git diff and can keep track of the change this way. This would of course not work if you incorporate the upstream changes automatically without reviewing. In that case we would probably need to do it elsewhere like in forms.scss
Comment #6
stefan.kornComment #7
jannakha commentedthank you for your contribution.
tested and works as expected.
Comment #9
vladimirausThank you all for your contributions. 🎂
Committed.
Comment #12
vladimiraus