Align CheckBox and Label in Bootstrap Row in ASP.Net MVC

Hi

CheckBox Value not showing correctly on Edit in Modal Popup and when clicked on Edit Value appears in Centre in modal popup.

@using (Html.BeginForm("CreateEdit", "Location", FormMethod.Post))
{
    <input type="hidden" id="hfAU" name="hfAU" value="A"/>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group row">
                            <label class="control-label col-sm-3" for="Id">Id</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control form-control-sm" autofocus id="txtId" name="Id" placeholder="Id">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-sm-3" for="Description">Description</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control form-control-sm" id="txtDescription" name="Description" placeholder="Description">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-sm-3" for="IsActive">Active</label>
                            <div class="form-check col-sm-9">
                                <input class="form-check-input col-sm-9" type="checkbox" id="IsActive">
                                <input type="hidden" id="hfIsActive" name="IsActive" />
                            </div>
                        </div>
                    </div>
                </div>
 
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
}

$(document).on('click', '[id*=btnEdit]', function () {
    $('#IsActive').removeAttr('checked').removeAttr("disabled");
    $('#hfIsActive').val('false');
 
    var data = $(this).closest('tr').find('td');
    var Id = data.eq(0).html();
    var Description = data.eq(1).html();
    var isActive = $(this).closest('tr').find('input[type=checkbox]').is(':checked');
    $('#hfId').val(Id);
    $('[id*=txtId]').val(Id);
    $('[id*=txtDescription]').val(Description);
 
    if (isActive) {
        $('#IsActive').attr('checked', 'checked');
        $('#hfIsActive').val('true');
    }
 
    $('#myModal').modal('show');
});

Thanks