bootstrapVue radio-button-group are rendered in stacked mode instead in default inline mode

Question

I use bootstrapVue version 2.21.2 with bootstrap version 5.1.3.

This bootstrapVue version in tag default generates inline radio inputs, https://bootstrap-vue.org/docs/components/form-radio#inline-or-stacked-radios

But in my project are generated in stacked mode:

<b-col>
  <b-form-group label="Con quota sociale" v-slot="{ ariaDescribedby }">
    <b-form-radio-group
     v-model="filterQuotaSelected"
     :aria-describedby="ariaDescribedby"
     name="filter-quota">
     <b-form-radio value="">ignora</b-form-radio>
     <b-form-radio value="N">non in regola</b-form-radio>
     <b-form-radio value="S">in regola</b-form-radio>
    </b-form-radio-group>
  </b-form-group>
</b-col>

browser render

How to render inline? Have any idea?

Answer 1

After few step I resolved question.

It is a problem of plugin version .

BootstrapVue v.2.21.x was designed to interoperate with bootstrap v4.5.3, setting up my project folder, the installer, for default, have downloaded last version 5.x of bootstrap which is incompatible.

Step for resolving...

1. change file "package.json" substituting "bootstrap": "^5.x" in dependencies object with

"dependencies": {
    "bootstrap": "4.5.3",
...
}

2. in folder project run

npm update