vertical align of col-form-label in grid form context with custom-control ?[V4B2]

[jipexu]

Hi
before i used this html .form-control-label instead of the new .col-form-label and the vertical align was ok in this case ... but now how to correct this ?

for this structure the vertical align is not nice ...

<div class="form-group row">
      <label class="col-form-label col-sm-4" for="xtiny_mce">Activer l'éditeur Tinymce</label>
      <div class="col-sm-8">
         <label class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="xtiny_mce" value="true" checked="checked">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">Oui</span>
         </label>
         <label class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="xtiny_mce" value="false">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">Non</span>
         </label>
      </div>
   </div>

thanks

[andresgalante]

Hi @jipexu can you please generate a codepen or a place to preview it?

[jipexu]

here is https://codepen.io/jipexu/pen/prWMKb

[jipexu]

so it's seems that this rules of col-form-label are not adapted in this case ...
padding-top: calc(.375rem + 1px);
padding-bottom: calc(.375rem + 1px);

how to solve without change any html ...?

[jipexu]

Hi
we can also see the problem in the doc
https://getbootstrap.com/docs/4.0/components/forms/
in the Horizontal Form section (the Radio label is y misaligned ...)

for now i only find a way to align (add a .col-form-label on the second col who contains the custom-control custom-radio) ...

[mdo]

Best option is manual customization here—there's on way to adjust the label based on those form controls. However, in #24932 we made some adjustments to the .col-form-label for <legend>s in the example you're linking to. Take a look at the latest in v4-dev and see if the same will work for you.