Label for checkbox not showing checkmark – MVC bootstrap

I'm using TwitterBootstrapMVC. To generate checkbox from enum, I'm using the below code

@form.FormGroup().CustomControls(Html.Bootstrap().CheckBoxesFromEnum($"{nameof(CSViewModel.Option)}"))
                 .CustomLabel("Options")

It gets rendered in HTML like this

<div class=" form-group">
    <label class="control-label col-sm-1 col-md-1" for="">Options<span class="required" style="visibility:hidden;" wfd-invisible="true">*</span>    </label>
    <div class="col-xs-11 col-sm-11 col-md-11">
        <div class="input-list-container">
            <div class="checkbox">
                <label for="Option_0">
                    <input id="Option_0" name="Option" type="checkbox" value="UpdateAsOfDate">UpdateAsOfDate<span class="required" style="visibility:hidden;">*</span> 
                </label>
            </div>
        </div>
    </div>  
</div>

enter image description here

Problem is, when I click on the checkbox, it won't show the checkmark. The label for is not getting linked with the checkbox input.

I tried editing the HTML in the browser by placing the "label for" after the input checkbox, and it works.

<div class=" form-group">
    <label class="control-label col-sm-1 col-md-1" for="">Options<span class="required" style="visibility:hidden;" wfd-invisible="true">*</span>    </label>
    <div class="col-xs-11 col-sm-11 col-md-11">
        <div class="input-list-container">
            <div class="checkbox">
                <input id="Option_0" name="Option" type="checkbox" value="UpdateAsOfDate">
                <label for="Option_0"> 
                  UpdateAsOfDate
                  <span class="required" style="visibility:hidden;">*</span> 
                </label>
            </div>
        </div>
    </div>  
</div>

How to make the bootstrap to render the HTML like above ? Or how it can be fixed in bootstrap ?

Tags: , , , , , ,