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
– Juha Untinen, Commented Jul 16, 2018 at 11:12

ackushiw · Accepted Answer · 2018-03-20 22:23:46Z

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, 2018 at 22:23

answered Mar 19, 2018 at 21:31

ackushiw

1,7362 gold badges14 silver badges15 bronze badges

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

6 Comments

fghf Over a year ago

should I import to component?

ackushiw Over a year ago

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

fghf Over a year ago

still no luck. the same result

ackushiw Over a year ago

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

fghf Over a year ago

commited import to App.vue

|

Juha Untinen · Accepted Answer · 2018-07-16 11:39:09Z

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
@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.

Zeedia · Accepted Answer · 2021-09-02 02:01:41Z

7

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

answered Sep 2, 2021 at 2:01

Zeedia

1,5431 gold badge15 silver badges23 bronze badges

4 Comments

Jonas D. Over a year ago

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 Over a year ago

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

Ridvan Sumset Over a year ago

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...

rubebop Over a year ago

Thanks! I had the same problem "the other way around", i.e. using bootstrap-vue-next with Bootstrap 4 instead of 5.

daniel_po · Accepted Answer · 2021-09-13 11:44:03Z

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]

Don M · Accepted Answer · 2020-09-20 00:22:44Z

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

perezmlal · Accepted Answer · 2020-05-07 20:31:12Z

0

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
  }
}

answered May 7, 2020 at 20:31

perezmlal

3905 silver badges13 bronze badges

Comments

fghf · Accepted Answer · 2018-03-20 22:54:27Z

-2

Solution:

Import to App.vue:

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

answered Mar 20, 2018 at 22:54

fghf

7544 gold badges20 silver badges38 bronze badges

Collectives™ on Stack Overflow

Bootstrap-vue doesn't load CSS

7 Answers 7

6 Comments

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Linked

Related