After adding a radio button element to my table, I noticed it was not appearing on the page. To troubleshoot, I created a snippet with the same code and found that the radio button did show up there. Additionally, when I added a background color to see where the radio button was positioned, it turned out that the button was covering my text. Can anyone explain why this is happening and suggest a solution?
EDIT: This issue is occurring within Bootstrap 4.
This is how it looked after adding a background color to the radio button: https://i.sstatic.net/304Nm.png
<div class="row">
<div class="col-25">
<h1>ABC Corp</h1>
<h4>Bill for the month of: June</h4>
<h4>Payment due: 5/10/2020</h4>
<hr />
<table id="billing">
<tr>
<th width="25%">Company</th>
<th width="25%">Plan</th>
<th width="25%">Packages</th>
<th width="25%">Price/pkg</th>
<th>Total</th>
</tr>
<tr>
<td>ACME</td>
<td>Premium</td>
<td>10,000</td>
<td>$0.039</td>
<td>
<div>
<label><input type="radio" id='regular' name="optradio">390.00</label>
</div>
</td>
</tr>
<tr>
<td>NB Distribution</td>
<td>Professional</td>
<td>1,000</td>
<td>$0.049</td>
<td>
<div>
<label><input type="radio" id='regular' name="optradio">49.00</label>
</div>
</td>
</tr>
</table>
<hr>
<p>Balance due <span class="price" style="color:black"><b>$439.00</b></span></p>
<hr >
</div>
</div>