Why won't BootstrapVue Render?

Question

I recently used npm to install BootstrapVue with: npm install vue bootstrap-vue bootstrap

I then included BootstrapVue into the root of my project like so:

import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Finally, this is the template I am using to test the BootstrapVue component:

<template>
  <div>
      <search-bar />
      <div v-for="post in posts" :key="post.id">
          <post :postData="post" />
      </div>
      <b-button pill >TEST</b-button>
  </div>
</template>

When I go to check the web page, the button appears, but it renders with no styling. The strange thing is that when I check the Vue dev tools extension, the BButton component is recognized and contains all the styling properties included (in this case, just the "pill" option set to true). I even inspect the button element on the DOM and it contains the classes that were passed down from BootstrapVue, but none of those styles were rendered. What am I missing here?

Also, just for good measure, I looked in the package.json file to make sure Bootstrap and BootstrapVue were installed and were up to date. They are.

In docs, they explicitly import Bootstrap and BootstrapVue CSS files bootstrap-vue.js.org/docs/#using-module-bundlers — artanik
– artanik, Commented Mar 10, 2020 at 17:56
@artanki That's what I get for skimming the docs. Thank you. — user9777330
– user9777330, Commented Mar 10, 2020 at 17:58

Hank X · Accepted Answer · 2020-03-11 01:48:28Z

1

in your root of your project(app.js), you will need to add 2 more lines

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

To import the css files

answered Mar 11, 2020 at 1:48

Hank X

2,0542 gold badges15 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why won't BootstrapVue Render?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related