Bootstrap checkbox size wrong with smaller body font - css

Question

I have set my default font size to be based on 10px via 62.5%, and then set the body to be 1.4rem. This seems to cause issues with the custom checkbox controls and they no longer align correctly.
I'm using Bootstrap 4's SASS files combined with my own. Is there something in the variables file that I'm missing to fix this? Or maybe some overrides I need to do? I've tried messing with various padding, margins, font sizes, etc. but the way they have this working isn't obvious.
Here is what I have set for the default font sizes for the site:
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
And here is the HTML
<div class="container-fluid">
<div class="row align-items-end">
<div class="col">
<div class="form-group">
<label for="worker">Worker</label>
<select class="form-control" id="worker">
<option>Jane Doe</option>
<option>John Smith</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
</div>
JSFiddle
To sum up, basically I need the ability to change the body font size and yet still have the checkbox to still work correctly and be the same height as the input fields when they are next to each other.

Answer 1

You can make the parent element flex and use align-items to center vertically. You would also need to use non-absolute position on the checkbox element. That will keep them centered vertically regardless the font size of the page.
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
.custom-control {
display: flex;
align-items: baseline;
}
.custom-control-indicator {
position: static;
margin: 0 .5rem 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row align-items-end">
<div class="col">
<div class="form-group">
<label for="worker">Worker</label>
<select class="form-control" id="worker">
<option>Jane Doe</option>
<option>John Smith</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
</div>
You could also use top: 50%; transform: translateY(-50%); to center the checkbox vertically, then set the line-height of the text to 1 so it doesn't affect vertical alignment.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
.custom-control-indicator {
top: 50%;
transform: translateY(-50%);
}
.custom-control-description {
line-height: 1;
}
</style>
<div class="container-fluid">
<div class="row align-items-end">
<div class="col">
<div class="form-group">
<label for="worker">Worker</label>
<select class="form-control" id="worker">
<option>Jane Doe</option>
<option>John Smith</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
</div>

Answer 2

A simple solution would be to change the styles for the checkbox:
.custom-control-indicator {
height: 1.4rem;
width: 1.4rem;
top: calc(1.4rem * 0.25);
}
Change the 1.4rem as required to the same size as the body font-size (you can also set this up to work automatically using SASS variables