I was following link, 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>

---