CODEWITHSUNDEEP
cssvue.jsbootstrap-4bootstrap-vue
BitlyTwiser
BitlyTwiser

Reputation: 33

Bootstrap styling not properly applying to all elements within an application

This question is oddly annoying, yet I cannot seem to discover any valid reason as to why this is occurring.

I have a super simple Vue app that I am working on in which I am using Vue Bootstrap. It seems that some elements do not have the proper Bootstrap CSS values being appropriated to them.

I have several radio buttons which have a generic radio within them when I am expecting them to appear as they are shown within the bootstrap documentation. odd buttons.

Expected: expected_results

The code for this item is just the generic template code that is within the documentation and I have used this many times before with the expected results.

I am not linking/embedding any external style sheets, all other style tags are scoped within all other components. I am not sure how/why these buttons are appearing in such a fashion.

Code Snippet:

<template>
  <div>
  <b-form-group
      label="Button style radios with outline-primary variant and size lg"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-radio-group
        id="btn-radios-2"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        button-variant="outline-primary"
        size="lg"
        name="radio-btn-outline"
        buttons
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: '',
        options: [
          { text: '1 minute', value: '60' },
          { text: '5 minutes', value: '300' },
          { text: '10 minutes', value: '600' }
        ]
      }
    }
  }
</script>

Importing the boostrap is done as one generally would within the main.js file. Now oddly enough all styling works except for when creating toast messages with $bvToast, but that will be a separate issue.

Import of boostrap:

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import router from './router'
import store from './store'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(VueAxios, axios)

Any ideas are most welcome!

Upvotes: 3

Views: 332

Answers (1)

Hiws
Hiws

Reputation: 10324

As mentioned in the comments on the Question, you've installed Bootstrap 5, which BootstrapVue isn't built for.

If you instead install Bootstrap version 4.5.3 (the latest supported version as of BootstrapVue 2.21.2), it should display correctly.

Upvotes: 1

Related Questions