I do not know why my code is not working properly with the input radio button group in Bootstrap 5
I want something like this align with the Label:
Instead the code throw me something like this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="row">
<div class="mb-3">
<label class="col-form-label col-xl-3" for="rd">
<i class="fa fa-question-circle" style="color: #d81e05"></i> Select The Radio</label>
<div class="btn-group btn-group-sm "style="display:flex" role="group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1" style="flex:0.5">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2" style="flex:0.5">
Radio 2
</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3" style="flex:0.5">Radio 3</label>
</div>
</div>
</div>