Bootstrap Custom Radiobox without Label is dis-aligned - css

Question

I am using Bootstrap4 custom radiobutton and it works fine as long as I use Label text. Sometimes it makes no sense to have text, but then the radiobutton alone is dis-aligend. How can this be fixed?
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
Result:
Fiddle: https://jsfiddle.net/SchweizerSchoggi/51vrL8px/5/
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>

Answer 1

Using a special character which does not print anything will allow you to get the proper alignment without showing any text next to the radio button.
‌
My guess on why it messes up the styling is because of the ::before and ::after code that gets added to the text. If there is no text there is nothing to add the tags to.
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">‌</label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>

Answer 2

Add mb-3 class on the empty label
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label mb-3" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>