bootstrap: Custom Control Checkbox not working without label

When ommitting the label tag in a custom-control-input, the checkbox is not showing up

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
</div>

Sometimes one would need a styled checkbox without a label, especially when working with selection lists or tables.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 37
Comments: 22 (4 by maintainers)

Most upvoted comments

Suggesting we reopen this. When hiding label using the “text-hide” method, checkboxes are still off centered due to the padding that exists to offset the label from the checkbox.

anthonyadamski on Oct 19, 2019

This problem starts from Bootstrap v4.1.1 (https://github.com/twbs/bootstrap/pull/25944)

Fix empty custom-control-label alignment issue Before: https://codepen.io/anon/pen/yRdegO After: https://codepen.io/anon/pen/bmPEgX

.custom-control-label {
  vertical-align: top;
}

source: https://github.com/twbs/bootstrap/pull/27566#issue-227128125

cichy380 on Nov 27, 2018

This worked 100% for me. Checkbox is there without label:

<div class="custom-control custom-checkbox mr-sm-2">
    <input id="FieldName" type="checkbox" class="custom-control-input" />
    <label for="FieldName" class="custom-control-label">
        <span class="sr-only"></span>
    </label>
</div>

fernandoweiler on Dec 11, 2020

I have the same problem (v 4.1.1) Using “text-hide” instead of “sr-only” it works!

AlessandroVecchi on May 30, 2018

The problem is, that You have to use label “for” attribute, and id for input, because it triggers the script

IMalaniak on Jan 14, 2020

My version is 4.0.0 published on npm.

Working with empty labels is working, but thats not a good practice as it results in unneeded code overhead.

dpetratsch on Apr 10, 2018

@jipexu it doesn’t work either if you add the sr-only class to the label. An empty label element with the class custom-control-label works but it’s kind of a hack and it’s not what the boostrap documentation recommend to do : https://getbootstrap.com/docs/4.0/components/forms/#without-labels.

FrancisStat on Apr 9, 2018