I'm trying to replicate the functionality of radio buttons within a bootstrap form-group, where a line in a form contains multiple buttons ("btn btn-success" for example) that can be selected, but only one at a time. I am aiming for an output like this:
https://i.sstatic.net/ZNdIz.png
However, I am currently seeing something like this:
https://i.sstatic.net/8JJje.png
Additionally, I am having trouble selecting the Smoking button.
The code I am using is as follows:
<div class="form-group row">
<label for="section" class="col-12 col-md-2">Section</label>
<div class="col-md-10">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>Non-Smoking
</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option2" autocomplete="off">Smoking
</label>
</div>
</div>
</div>