PR #25944 broke custom-control-label when empty
Created by: qraynaud
Empty labels are needed when using checkboxes in horizontal forms. If you let it empty in this use case on 4.1.1, the checkbox appears way off in the bottom: https://codepen.io/anon/pen/ZoJqyd
As you can see, it was working perfectly on 4.1.0: https://codepen.io/anon/pen/VxzEMp
I tried to look into every commit between 4.1.0 and 4.1.1 and found that PR #25944 was to blame. When I reverted its changes, the behavior was as before. Because this fix looked more than useful, I found a way to keep it and get my use case working as intended.
My proposed fix is to add vertical-align: top
to the custom-control-label
class:
.custom-control-label {
vertical-align: top;
}
Here is a demo: https://codepen.io/anon/pen/NMvLEw
Since I don't know the bootstrap codebase & good practices, I hope someone else can come up with a PR though.