Solution 1 :

The issue is that the padding is eating up the entire space inside the form control, which has a set fixed height.

enter image description here

You can make its height automatic, but your field will then be pretty big.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
  <div class="col-md-6">
    <div class="form-group">
      <label class="small mb-1" for="selectType">Register as</label>
        <select class="form-control py-4" id="selectType" style="height: auto;">
          <option value="1">Student</option>
          <option value="2">Mentor</option>
      </select>
    </div>
  </div>
 </div>

Problem :

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
  <div class="col-md-6">
    <div class="form-group">
      <label class="small mb-1" for="selectType">Register as</label>
        <select class="form-control py-4" id="selectType">
          <option value="1">Student</option>
          <option value="2">Mentor</option>
      </select>
    </div>
  </div>
 </div>

I get this as a result.

It only works when i reduce it to py-2 but the rest of the form works perfectly with py-4.
Any suggestions?

By