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

Same thing with Vue 2.5 and Bootstrap-Vue 2.0.0. The CSS files do resolve, as changing the path raises a Not Found error during compilation. No style takes effect. — Juha Untinen, Jul 16 '18 at 11:12

ackushiw · Answer 1 · 2018-03-20T22:23:46.710

14

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.

edited Mar 20 '18 at 22:23

answered Mar 19 '18 at 21:31

ackushiw

1,726
2
14
15

should I import to component? – Alex Bondar Mar 19 '18 at 22:35
1

You'll want it in App.vue if that's your root component – ackushiw Mar 19 '18 at 22:37
1

still no luck. the same result – Alex Bondar Mar 19 '18 at 22:50
Can you share more of your code? I could have a look on github or https://codesandbox.io/ – ackushiw Mar 20 '18 at 00:24
https://github.com/abondar24/SocialTournamentService/tree/master/admin_frontend but I havent commited yet latest changes with import – Alex Bondar Mar 20 '18 at 09:14
1

commited import to App.vue – Alex Bondar Mar 20 '18 at 18:35

Juha Untinen · Answer 2 · 2018-07-16T11:39:09.487

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

Make sure you have both vue-style-loader and css-loader in package.json

Then in your webpack config, your module.rules should have this object:

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

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);

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 — ARUN Madathil, Jul 27 '18 at 08:51
@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. — Juha Untinen, Jul 27 '18 at 10:02

score 6 · Answer 3 · answered Sep 02 '21 at 02:01

6

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 bootstrap@4.5.3 --save

answered Sep 02 '21 at 02:01

Zeedia

1,313
14
20

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! – Jonas D. Sep 19 '21 at 19:24
Thank you, I was pulling my hair why only some elements were not being styles. THANK YOU!!! – Nikolay Dyankov Dec 28 '21 at 20:58
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... – Ridvan Sumset Feb 03 '22 at 14:18
Thanks! I had the same problem "the other way around", i.e. using `bootstrap-vue-next` with Bootstrap 4 instead of 5. – rubebop Jun 08 '23 at 13:09

score 1 · Answer 4 · answered Sep 13 '21 at 11:44

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 bootstrap@4.5.3 or npm -i bootstrap@4.5.3

score 0 · Answer 5 · answered May 07 '20 at 20:31

In my case I was working with vue-cli 4.3.1, and I was using this configuration by error.

If you remove this configuration then all work nice!

https://cli.vuejs.org/guide/css.html#css-modules

If you want to drop the .module in the filenames, set css.requireModuleExtension to false in vue.config.js:

// vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}

score 0 · Answer 6 · answered Sep 20 '20 at 00:22

I had to do a combination/variation of some of the other answers.

App.vue:

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import Vue from 'vue'


// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

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



export default {
  name: 'App',
  components: {
  }
}

Sources: https://forum.vuejs.org/t/ui-library-styles-not-loading-in-web-components/77858/2 https://bootstrap-vue.org/docs

score -2 · Answer 7 · answered Mar 20 '18 at 22:54

-2

Solution:

Import to App.vue:

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

answered Mar 20 '18 at 22:54

Alex Bondar

1,167
4
18
35

Bootstrap-vue doesn't load CSS

7 Answers7

Linked