form-group label size to huge

Applying “bg-light” as “label-class” property of “form-group” component results in a background which exceeds the outer html form. We try to create a form with a full-size label-column background color.

I first thinked about a bug of bootstrap and created a ticket. They responded that this is intended result of “form-row” and “col*” usage: A background should be applied to the inner element.

In bootstap-vue this can only be done with “label” slot, but not a “label” property. When using the slot the element will require additional styling because of the classes of the legend element: bootstrap-vue adds both “col*” and “col-form-label”

I think for correct sizeing a form-group:

<b-form-group 
	label="label" 
	description="description"
	valid-feedback="success"
	invalid-feedback="error"
	label-class="bg-light"
>
	Content
</b-form-group>

Should generate something like the following html:

<fieldset class="form-group">
	<!-- form-row automatically adds negative left and right margins  -->
	<div class="form-row">
		<!-- container required to only apply bootstraps size and padding information ("col*") which corrects the margin of form-row -->
		<div class="col">
			<!-- container required to support full size backgrounds -->
			<div class="bg-light">
				<!-- legend which applies the label behaviors -->
				<legend class="col-form-label">label</legend>
			<div>
		<div>
		<div class="col">
			Content
			<div class="invalid-feedback">error</div>
			<div class="valid-feedback">success</div>
			<small class="form-text text-muted">description</small>
		</div>
	</div>
</fieldset>

This seems to be a little awkward. Maybe someone has an alternative?

[trueleader]

Ah, thx: adding of “pt-0 pb-0” to remove the padding, instead of creating a new selector with margins to negate the same effect, seems to be a much cleaner way

[tmorehouse]

You could try adding prop label-class="mb-0 mt-0" which removes the label’s top and bottom margin.