I'm having trouble with creating inline radio buttons using bootstrap. Neither of the options are being selected.
I've attempted various solutions such as adjusting the attributes for, name, and trying different ways to call the bootstrap function. I even tried manually changing the ::before color from the bootstrap function.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-inline">
<label for="rd_Gender" class="col-md-6 col-form-label text-left">
Gender:<span id="spnGender" style="color:red; display:none;"> *</span>
</label>
<div id="rd_Gender" onclick="clearRatings()" class="form-inline d-flex align-items-center">
<div class="custom-control custom-radio custom-control-inline">
<label class="custom-control-label female" for="rd_Gender_0">
<input id="rd_Gender_0" type="radio" class="custom-control-input" name="Gender" value="50" checked="checked" />
{{calcData.prCalcLabels.lblFemale}}
</label>
</div>
<div class="custom-control custom-radio ml-5 custom-control-inline">
<label class="custom-control-label male" for="rd_Gender_1">
<input id="rd_Gender_1" type="radio" class="custom-control-input" name="Gender" value="51" />
{{calcData.prCalcLabels.lblMale}}
</label>
</div>
</div>
</div>I am anticipating either one of the radio buttons to be selected. Although it does select, the background is not changing.