Align checkboxes & radios

[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

[mdo]

Can we look at putting this in #28450? I haven’t had a ton of time to revisit that draft PR, so it might be gnarly, but it’s my intent to ship that in v5 and combine these two sets of components. I didn’t think to make them explicitly linked to line-height, but that PR got closer than the current ones in v4.

[MartijnCuppens]

I didn’t think to make them explicitly linked to line-height

It's not what I really prefer, but this seems to be the only solution to properly align the native checkboxes.

This PR will have merge conflicts with #28450, maybe I shall just move the changes in reboot to that PR?

[MartijnCuppens]

Gonna close this since this PR introduces some issues when focus states are applied.