Bootstrap 4

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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>

CSS

.content-checkbox {
  display: grid;
  justify-content: center;
}