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>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4