custom-checkbox broken when not using label next to checkbox
Created by: Gillardo
When reporting a bug, include:
- Operating system and version (Windows)
- Browser and version (Chrome 52.0.2743.116 m (64-bit))
Code to reproduce, as you can see i am using a form, so no need to have a description
<div class="row form-group">
<label class="col-sm-2 col-form-label">Legend</label>
<div class="col-sm-10 col-md-7">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" />
<span class="custom-control-indicator"></span>
</label>
<div class="text-muted">
Display legend
</div>
</div>
</div>
I have also tried adding a blank custom-control-description
class to the html, so it looks like this, and again, still same line up issue
<div class="row form-group">
<label class="col-sm-2 col-form-label">Legend</label>
<div class="col-sm-10 col-md-7">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description"></span>
</label>
<div class="text-muted">
Display legend
</div>
</div>
</div>
If however, i use custom-control-description
and ever in a single character, it lines up fine, as you can see here