Bootstrap: Checkboxes / Radio buttons don't vertically align with label text when using a custom font size

[ddankwerth]

Create a customized bootstrap with font-size 20px being the only change.
Any input type checkbox/ radio with label text is viably not aligned

Seems like the generated margin is

input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}

regardless of the base font size
Here is an example :

margin probably needs to be calculated based on font size...

[mdo]

Agreed we need to set them by font size, but I'm hesitant to make any changes to v3 to support that just yet. I know it sucks, but for now you'll need to customize that yourself. v4 will have proper scaling of things by typography.

[ismailarilik]

@mdo, is it difficult to send a fix about this issue to a next minor version of Bootstrap 3?

[patrickhlauke]

there won't be any new major nor minor versions of Bootstrap 3. all efforts are now focused on version 4, I'm afraid.

[ismailarilik]

@patrickhlauke , so what's about bug fixes? This can be thought as a bug, I think.

[ismailarilik]

I have found a solution:

// Position radios and checkboxes more better
input[type="radio"],
input[type="checkbox"] {
    margin-top: ((@line-height-base - 1)/2) * 1em;
    width: 1em;
    height: 1em;
}

This solution is not only care about font-size, also line-height. Some examples: https://jsfiddle.net/r0m7a2kj/

[ihorzenich]

This bug is also present in v4-beta1 and could be solved for custom checkboxes/radios with

.custom-control {
  align-items: center;
}

but it need additional fix for regular checkboxes/radios too.