Currently, I am dealing with an issue related to the alignment of radio buttons and their labels in the bootstrap style.
The problem becomes apparent when I adjust the font size of the label: the radio button remains the same size in its original position, while the label changes size causing it to shift slightly downwards (the degree of movement varies with the font size; larger size results in a greater shift).
Take a look at the alignment problem in this screenshot:
https://i.sstatic.net/JwDkO.png
Additionally, I am sharing the relevant portion of my code with you:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form name="ejercicio_p1_form" method="POST" action="/response_p1_exercise">
<div class="container">
<div class="row">
<div class="col-2"></div>
<div class="col-3">
<div class="radio" id="radio_p1_1">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_1" value="1" onclick="submit_form_p1_exercise()">
<label style="font-size:30px" class="radio custom-control-label" for="p1_ejer_1"> Option 1</label>
</input>
</div>
</div>
</div>
<div class="col-2">
<div class="radio" align="center" id="radio_p1_2">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_2" value="2" onclick="submit_form_p1_exercise()">
<label style="font-size:30px" class="radio custom-control-label" for="p1_ejer_2"> Option 2</label>
</input>
</div>
</div>
</div>
</div>
</div>
</form>