Centering a Checkbox vertically with other input components with bootstrap

I am trying to center a checkbox component styled with BootStrap, and I have not had any luck so far. I have tried using mt to specify different margin sizes so as to make it centered with a text input but none of the values fixes the problem.

This is how far I have come:

I have one form row, styled with the class "form-row", and two form-groups inside of it to group labels with their respective controls. It appears that, by default, a checkbox control is at the same height as a label for an input control (for example) when they are in a form group.

This is the relevant piece of code:

<div class="form-row col-sm-12">
              <div class="form-group col-sm-3">
                <label for="cuota">Cuota en litros</label>
                <input id="cuota" class="form-control" type="number" v-model.number="nuevaRuta.cuotaLitros">                
              </div>
              <div class="form-group col-sm-3 mt-5">                
                <input type="checkbox" class="custom-control-input" v-model="nuevaRuta.activa" id="activa"/>                
                <label for="activa" class="mr-8 custom-control-label">Habilitar esta ruta</label>                           
              </div>
</div>

The closest I can come is to put it at the bottom baseline of other controls that are in the same row. I would like it it to be in the middle. Does anyone know how I can achieve this?