CODEWITHSUNDEEP
vue.jsvue-componentbootstrap-vue
bruno rafael
bruno rafael

Reputation: 55

b-form-select VUE bootstrap style/CSS issue

I'm new working with VUE, but until the moment i already read and try some suggestions, but the issue continues.

I'm trying to use this one: Form Select - Bootstrap ( like the example )

When i check my local host page I have:

Wrong style

In the code I have:

import {BootstrapVue, IconsPlugin, FormRatingPlugin, FormSelectPlugin  } from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(FormRatingPlugin)
Vue.use(FormSelectPlugin)

Vue.component('b-form-select', BFormSelect)


[template]
<b-form-select 
    v-model="selected2" 
    id="socioPack"  
    name="socioPack" 
    :options="options2">
</b-form-select>
<div class="mt-3">Selected: <strong>{{ selected2 }}</strong></div>
</div>


[data()]

selected2: null,
options2: [
    { value: null, text: 'Please select some item' },
    { value: 'a', text: 'This is First option' },
    { value: 'b', text: 'Default Selected Option' },
    { value: 'c', text: 'This is another option' },
    { value: 'd', text: 'This one is disabled', disabled: true }
]

Can someone give me a tip?

Let me know if more details needed.

Upvotes: 1

Views: 2407

Answers (1)

Hiws
Hiws

Reputation: 10334

BootstrapVue is built for Bootstrap 4.

My guess is you've installed Bootstrap 5 by mistake, which has a different syntax for selects.

If you're using npm run npm install [email protected] to install the latest supported version of Bootstrap and it should display corerctly.

Upvotes: 4

Related Questions