Odtnhj

I was following the documentation provided by MD, but I get this annoying checkbox that appeared on my buttons and I have no clue why as I followed exactly what they had written.

I tried editing my code, but I don't know how to get rid of this checkbox that is beside every one of my images. For context I currently have 2 divs(rows) inside my container, 1 taking 92% of height the other taking 8% set in css.

CSS:

.buttons 
 height: 8%;

HTML:

<div class="row buttons>

 <!-- Bottom 5 Buttons -->
 <div class="btn-group" role="group" data-toggle="buttons">

 <label class="btn btn-light-blue form-check-label">
 <input class="form-check-input" name="options" type="radio" id="option1" autocomplete="off">
 <i class="fa fa-question"></i>
 </label>

 <label class="btn btn-light-blue form-check-label">
 <input class="form-check-input" name="options" type="radio" id="option2" autocomplete="off">
 <i class="fa fa-question"></i>
 </label>

 <label class="btn btn-light-blue form-check-label active">
 <input class="form-check-input" name="options" type="radio" id="option3" autocomplete="off" checked>
 <i class="fa fa-home"></i>
 </label>

 <label class="btn btn-light-blue form-check-label">
 <input class="form-check-input" name="options" type="radio" id="option4" autocomplete="off">
 <i class="fa fa-question"></i>
 </label>

 <label class="btn btn-light-blue form-check-label">
 <input class="form-check-input" name="options" type="radio" id="option5" autocomplete="off">
 <i class="fa fa-cog"></i>
 </label>

 </div>
</div>