Bootstrap 4 vertical align custom checkbox against progress bar

Question

I've the following code

<div class="row">

        <div class="col-md-2">
            <div class="custom-control custom-checkbox my-auto" style="display: inline; align-items: center;">
              <input class="custom-control-input" id="customCheck2" type="checkbox" checked >
              <label class="custom-control-label" for="customCheck2"></label>
            </div>
        </div>

        <div class="col-md-10">
            <div class="progress-wrapper mt-1 pt-0">
              <div class="progress-info">
                <div>
                  <span>5 Sterne</span>
                </div>
                <div class="progress-percentage">
                  <span style="font-size: 12px">65%</span>
                </div>
              </div>
              <div class="progress">
                <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
              </div>
            </div>
        </div>

    </div>

My problem is, that the checkbox is not vertical centred as you can see here:

There is also no margin or padding on it.

Answer 1

Simply add the d-flex class to the .col element:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container">
<div class="row">
        <div class="col-2 d-flex">
            <div class="custom-control custom-checkbox my-auto" >
              <input class="custom-control-input" id="customCheck2" type="checkbox" checked >
              <label class="custom-control-label" for="customCheck2"></label>
            </div>
        </div>

        <div class="col-10">
            <div class="progress-wrapper mt-1 pt-0">
              <div class="progress-info">
                <div>
                  <span>5 Sterne</span>
                </div>
                <div class="progress-percentage">
                  <span style="font-size: 12px">65%</span>
                </div>
              </div>
              <div class="progress">
                <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
              </div>
            </div>
        </div>
  </div>
    </div>