Bootstrap-vue doesn't load CSS

Question

I am writing a Vue.js app with Bootstrap 4 and I can't loaded though I followed the documentation.

Added to main.js

Vue.use(BootstrapVue);

Added to css file related to App.vue:

@import '../../node_modules/bootstrap/dist/css/bootstrap.css';
@import '../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';

Here is template:

<div class="main">
<div>

    <b-modal id="modal1" title="Something went wrong" v-if="!serverStatusOk">
        <p class="my-4">{{msg}}</p>
        <p class="my-4">{{statusCode}}</p>

    </b-modal>
</div>

<div>
    <b-tab title="Players" active>
        <br>Players data
    </b-tab>
    <b-tab title="Tournaments" active>
        <br>Tournament data
    </b-tab>
</div>

Result: no css rendered but in css file from dist dir I see Bootstrap What am I missing? The project created by vue-cli 3.0-beta

Solution 1

Try importing the files using JavaScript.

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

---

On closer inspection it looks like you're missing <b-tabs>
also <b-modal> is controlled by v-model

<div class="main">
    <div>
        <b-modal id="modal1" title="Something went wrong" v-model="errorModal">
            <pre class="my-4">{{ msg }}</pre>
            <p class="my-4">{{ statusCode }}</p>
        </b-modal>
    </div>
    <!-- Make sure to wrap b-tab in b-tabs -->
    <b-tabs> 
        <b-tab title="Players" active>
                <br>Players data
        </b-tab>
        <b-tab title="Tournaments">
                <br>Tournament data
        </b-tab>
    </b-tabs>
</div>

That should fix the styling of the tabs.

Solution 2

I came across this same issue, but luckily I found the cause: The loader is not loaded :)

1. Make sure you have both vue-style-loader and css-loader in package.json
2. Then in your webpack config, your module.rules should have this object:

   {
     test: /\.css/,
     use: ['vue-style-loader', 'css-loader'] // BOTH are needed!
   }

3. And in your App.vue, under the <script> section, you should import:

   import "bootstrap/dist/css/bootstrap.min.css";
   import "bootstrap-vue/dist/bootstrap-vue.css";

No need to use @ or relative node_modules paths or anything.

With these changes, it worked for me with Vue 2.5 and Bootstrap-Vue 2.0.0

---

Update:

Also, even though it feels a bit counter-intuitive, make sure you use() the Bootstrap-Vue package BEFORE you create the new Vue() in main.js. For example:

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';

Vue.use(BootstrapVue);

new Vue({
  el: '#app',
  router,
  components: { App },
  render: h => h(App),
});

If you do it in reverse order, it works only partially. For example some block elements will not have styles applied.

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';

new Vue({
  el: '#app',
  router,
  components: { App },
  render: h => h(App),
});

// Doing this after new Vue() will NOT work correctly:
Vue.use(BootstrapVue);

Solution 3

For new people facing above issue. None of the above answers worked for me. My problem was with installed bootstrap version. npm installled lastest version 5.1.0 which does not work with bootstrap-vue. I had to downgrade bootstrap to 4.5.3 (recommended version from website)

run following npm install [email protected] --save

Solution 4

bootstrap-vue require specific version of bootstrap in order to work correctly. Below is the recommendation from the Bootstrap-vue doc at the time of writing.

Vue.js v2.6 is required, v2.6.12 is recommended
Bootstrap v4.3.1 is required, v4.5.3 is recommended
Popper.js v1.16 is required for dropdowns (and components based on dropdown), tooltips, and popovers. v1.16.1 is recommended
PortalVue v2.1 is required by Toasts, v2.1.7 is recommended
jQuery is not required

Solution: Please install with the version yarn add [email protected] or npm -i [email protected]

View more solutions

Comments

[Alex Bondar]

should I import to component?

[ackushiw]

You'll want it in App.vue if that's your root component

[Alex Bondar]

still no luck. the same result

[ackushiw]

Can you share more of your code? I could have a look on github or codesandbox.io

[Alex Bondar]

github.com/abondar24/SocialTournamentService/tree/master/… but I havent commited yet latest changes with import

[Alex Bondar]

commited import to App.vue

[ARUN Madathil]

I did exactly same as in first example , and im using vscode as editor but its clearly saying that 'BootstrapVue' is declared but cant read ?? in browser console got the error [Show/hide message details.] ReferenceError: BootstrapVue is not defined

[Juha Untinen]

@ARUNMadathil: That sounds like the bootstrap-vue package did not install correctly. You could try running npm install bootstrap-vue --save again, and check that no errors appear during the install. You should get an entry in your project's package.json dependencies.

[Jonas D.]

Thanks for pointing this out! Didn't think of this (after almost half an hour of debugging...) while helping a (junior) friend struggling adding BootstrapVue to his project!

[Nikolay Dyankov]

Thank you, I was pulling my hair why only some elements were not being styles. THANK YOU!!!

[Ridvan Sumset]

the command in bootstrap-vue's getting started page is so wrong! npm install vue bootstrap bootstrap-vue when you do that it installs the latest version of bootstrap which is incompatible with bootstrap-vue...