node.js - Interesting visual bug with bootstrap form inputs -

i using bootstrap forms. in form group have check boxes. when hover mouse on first one, highlights first 1 expected. when hover on second one, highlights second 1 and first one. when hover on third one, highlights third 1 and first one. , on... i'm wondering if known bug bootstrap? i'm using nodejs pug on express server. code:

.form-group.centercheckboxes     label local center statistics         .form-check             label.form-check-label                 input#tutorrequestfrequency.form-check-input(type='checkbox' value='tutorrequestfrequency')                 |  tutor request frequency         .form-check             label.form-check-label                 input#totalworkinghours.form-check-input(type='checkbox' value='totalworkinghours')                 |  total working hours         .form-check             label.form-check-label                 input#totalhourstutored.form-check-input(type='checkbox' value='totalhourstutored')                 |  total hours tutored         .form-check             label.form-check-label                 input#totalweightpulled.form-check-input(type='checkbox' value='totalweightpulled')                 |  tutors "weight pulled" ratios 

perhaps using bootstrap classes wrong? within grid system i've triple checked grid make sure numbers rows , columns used properly. has ever heard of problem or know why happening?

i found issue. it's because using label tag incorrectly. when hovered on within .form-group hovering on label automatically being applied first checkbox in list.

to solve this, instead of using label instead used div put text inside label inside div.