'How to align a label with radio button on same line in Bootstrap Vue

I want to have the label inlined with its radio buttons:

<b-form-group label="Zobrazit">
  <b-form-radio-group id="radio-group-2" v-model="absoluteValues" name="radio-sub-component">
    <b-form-radio value="true">Hodnoty</b-form-radio>
    <b-form-radio value="false">Procenta</b-form-radio>
  </b-form-radio-group>
</b-form-group>

It looks this way:

enter image description here

I cannot find any relevant attribute in FormGroup element. The Label-align aligns the text but it does not merge both lines.

Update:

label-col=1 puts all on the same row but the radios are not vertically aligned: enter image description here

vue.jsbootstrap-vue


Solution 1:[1]

Apply pt-2 Bootstrap padding utility class to b-form-radio-group component to make it all on the same line

Try this:

 <b-form-group label-cols-sm="1" label="Zobrazit">
  <b-form-radio-group class="pt-2" id="radio-group-2" v-model="absoluteValues" 
    name="radio-sub-component">
    <b-form-radio value="true">Hodnoty</b-form-radio>
    <b-form-radio value="false">Procenta</b-form-radio>
  </b-form-radio-group>
</b-form-group>

Solution 2:[2]

Try using plain prop

<b-form-radio-group plain ...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chellappan வ
Solution 2 user1276700

Related Questions