Feature request: col-form-label should have optional size classes

[tmorehouse]

• Operating system and version: Any
• Browser and version: Any
• Bootstrap V4

Currently, .col-form-label and two helper classes for sizing .col-form-label-sm and .col-form-label-lg, so that the label can be matched with the form-control's sizing.

When using a <fieldset> to group related controls in a form-group, one uses the <legend> element to label the group of inputs, and one can use the corresponding class .col-form-legend to style the legend.

Unfortunately there are no helper classes .col-form-legend-sm or .col-form-legend-lg to control the legend text size so that it matches up with the form-control size or other col-form-labels that may be in the same form.

I have tried applying the .col-form-label-sm (or -lg) classes to the <legend> along with .col-form-legend, but it does not work, due to the order of the definition of the CSS rules which make .col-form-legend's font size overrule .col-form-label-sm

Maybe just simply moving the .col-form-legend CSS rule before the .col-form-label-{size} rules would suffice?

[tmorehouse]

PR #24932 adds in two size classes for horizontal form-group legend elements

[mdo]

Maybe just simply moving the .col-form-legend CSS rule before the .col-form-label-{size} rules would suffice?

Why do the PR if this would've sufficed? I'd prefer the simpler rearrangement vs a whole new suite of modifier classes.

[tmorehouse]

There are a few differences between label and legend, when I checked the latest _forms.scss, where .col-form-label includes a calculation to add on the input border widths (when calculating padding), while the .col-form-legend class doesn't:

.col-form-label {
   padding-top: calc(#{$input-padding-y} + #{$input-border-width});
   padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
   margin-bottom: 0; // Override the `<label>` default
   line-height: $input-line-height;
}

.col-form-legend {
   padding-top: $input-padding-y;
   padding-bottom: $input-padding-y;
   margin-bottom: 0;
   font-size: $font-size-base;
 }

If they were identical styling, it would be just a matter of moving the base .col-form-legend class above the label definitions and using the .col-form-label-{size} classes

[tmorehouse]

The question is, why couldn't legend and label use the same classes (.col-form-label & .col-form-label-{size}) and forgo the use of a special class for .col-form-legend? Would it be possible to normalize the two into a single namespace of classes that work for both?

[mdo]

Yeah, I feel that. Just tested it—can you make that change? Let's drop .col-form-legend and move the font-size reset to .col-form-label as font-size: inherit.

[mdo]

Maybe there's something more in the log as to why it needed to be another class?

[tmorehouse]

OK, I'll make some tweaks

[tmorehouse]

It appears .col-form-legend (when it was called -form-control-legend) was added in this commit 727722d#diff-55562cf68df408880356390d08c7a3cb but no real explanation why it is not the same as .col-form-label

[tmorehouse]

.col-form-legend is now gone altogether (and form docs updated)

For backwards comparability, would it be good to specify both class names?

.col-form-label,
.col-form-legend {
 /* ... */
}

[mdo]

For backwards comparability, would it be good to specify both class names?

Not necessary—we're still at beta, so we can break things.