Created by: MartijnCuppens
Cross browser aligning checkboxes and radios is hard because every browser seems to have different widths/height and align possibilities. This misaligns our checkboxes and radios in different ways.
I found a solution for this by setting the height of the input to the line height. This won't stretch the input but instead align it to the middle of the element which will perfectly align checkboxes and radios in every browser.
The only disadvantage is that the line height will depend on the line height of the body, but I think that's fine in almost any situation. The current situation is way worse imo.
Before:
- https://getbootstrap.com/docs/4.3/components/forms/#checkboxes-and-radios
- https://getbootstrap.com/docs/4.3/content/reboot/#forms
- https://getbootstrap.com/docs/4.3/components/input-group/#checkboxes-and-radios
After
- https://deploy-preview-28711--twbs-bootstrap.netlify.com/docs/4.3/components/forms/#checkboxes-and-radios
- https://deploy-preview-28711--twbs-bootstrap.netlify.com/docs/4.3/content/reboot/#forms
- https://deploy-preview-28711--twbs-bootstrap.netlify.com/docs/4.3/components/input-group/#checkboxes-and-radios
Closes #27755 (closed)