Bootstrap: Vertical alignment of radio/checkbox broken

[drauch]

Bug reports must include:

• Operating system and version: Windows 10
• Browser and version: Chrome 70
• Reduced testcase: https://getbootstrap.com/docs/4.0/components/forms/#default-stacked

Even in the default theme it is visible that the radio/checkbox controls are slightly located upwards compared to the label text. It becomes more apparent if you use a custom theme.

[XhmikosR]

Confirmed, just note that v4.0 is quite old. Also happens with Firefox on Windows 10 for me.

Current v4-dev live preview https://twbs-bootstrap4.netlify.com/docs/4.1/components/forms/#default-stacked

[XhmikosR]

@twbs/css-review: using margin-top: .5rem fixes the issue for me, but I'm not sure about other OS'es.

[MartijnCuppens]

Chrome on windows:

Chrome on mac:

The height and width of the checkbox on windows is 13px, on mac it's 14px. I don't know if there is a way to create a solution for all OS'es 🤔

[drauch]

@MartijnCuppens: maybe fix it with JavaScript? ¯_(ツ)_/¯

[herbalite]

https://stackoverflow.com/questions/306924/checkbox-size-in-html-css
@MartijnCuppens Above a link to SO with some approaches. Don't think any of them are without issues though, but if it points into the right direction it's worth to check it out.

[trollwinner]

Hello everyone!

I don't know if somebody met this issue before but I see the custom controls might have a problem with the alignment with some font-families. Here is an example of "monospace":

This extra property should help with it.

.custom-control-label {
    line-height: $font-size-base * $line-height-base;
}

[arcanisgk]

I have detected in V4.5 that it is not the only problem; even if we want to place the checkbox in the same row as an input or a Label of normal dimensions; it turns out that the checkbox goes crazy and does not align vertically or horizontally in the markup:

https://stackoverflow.com/questions/64579724/bootstraps-v4-5-checkbox-cannot-be-aligned-horizontally-or-vertically-when-next