FormGroup: allow setting label-cols=auto

[hackel]

Currently, the labelCols prop only accepts a boolean or a number to explicitly define the percentage of the container the label will fill.

I would like the label to auto-size based on its contents by using the col-auto class on the label instead of col. Specifying label-cols="auto" seems like a reasonable way to do this, or perhaps another boolean prop like label-col-auto.

I can currently achieve what I want like this:

<BFormGroup
    label="Label"
    label-for="input"
    label-cols
    label-class="col-auto"
>
    <BInput />
</BFormGroup>

In this case, the label gets both classes applied, but it works because col-auto overrides the col properties. I just don't feel like it conveys the intent well.

The desired output would be:

<div class="form-row form-group" role="group">
    <label class="col-auto col-form-label" for="input">Label</label>
    <div class="col">
        <input class="form-control" id="input" type="text">
    </div>
</div>

[tmorehouse]

I think this shouldn't be too difficult to add... it would need to be made available for all label break points

[tmorehouse]

BootstrapVue v2.1.0 has been released, which has added the ability to set label-cols to auto.