Cannot align radio button to center (vertically) [duplicate] - html

Question

This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 4 years ago.
I created a structure composed by two columns, the first have three radio buttons which I need to align to center (vertically), and the second contains some input field.
The structure have the following configuration:
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="mt-3 content-checkbox">
<div class="custom-control custom-radio">
<input type="radio" id="foo" name="test" checked class="custom-control-input">
<label class="custom-control-label" for="foo">Foo</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="foo1" name="test" class="custom-control-input">
<label class="custom-control-label" for="foo1">Foo</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="foo2" name="test" class="custom-control-input">
<label class="custom-control-label" for="foo2">Test</label>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="mt-3 text-center">
<div class="form-group">
<div class="form-group">
<label>Foo1</label>
<input type="text" class="form-control date" id="birthdatepicker" data-toggle="date-picker" data-single-date-picker="true">
</div>
<div class="form-group">
<label>Foo2</label>
<input type="text" class="form-control date" id="daterangetime" data-toggle="date-picker" data-time-picker="true" data-locale="{'format': 'DD/MM hh:mm A'}">
</div>
</div>
</div>
</div>
</div>
as you can see the result is this:
enter image description here
how can I align the radio button to the center vertically?
This is a JSFIDDLE.

Answer 1

You can add the following classes to the column (The one with the radio buttons.) and it would work:
d-flex align-items-center justify-content-center
You can find more information regarding these classes and more flex options here. This way you can even find more customizations that can help you even further.