[FIXED] How to align vertically input field text and checkbox?

Issue

I have input field and checkbox in the same row. I would like to vertically align checkbox in the middle. Here is example of what I have:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="form-row">
  <div class="form-group col-6">
    <label for="Addr">Address:</label>
    <input class="form-control" type="text" name="Addr" id="Addr" value="" placeholder="Enter Physical Address" maxlength="40">
  </div>
  <div class="form-group col-6">
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
      <label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>
    </div>
  </div>
</div>

As you can see in my example checkbox is on the top of the div container. How to align check box vertically in the middle?

Solution

As Bootstrap 4 documentation. Seen here https://getbootstrap.com/docs/4.0/utilities/flex/ you can use class="d-flex align-items-center". I added style="border: 1px solid black; height:200px;" to demonstrate.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="form-row d-flex align-items-center" style="border: 1px solid black; height:200px;">
  <div class="form-group col-6">
    <label for="Addr">Address:</label>
    <input class="form-control" type="text" name="Addr" id="Addr" value="" placeholder="Enter Physical Address" maxlength="40">
  </div>
  <div class="form-group col-6 ">
    <div class="custom-control custom-checkbox ">
      <input class="custom-control-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
      <label class="custom-control-label" for="sameAddress">check this box if mailing address is the same as physical address</label>
    </div>
  </div>
</div>

Answered By - jmag

Answer Checked By - Mildred Charles (PHPFixing Admin)