CODEWITHSUNDEEP
cssvue.jsbootstrap-4
Mielipuoli
Mielipuoli

Reputation: 1510

Vue-bootstrap does not render properly

I started a new webpack project, with Vue and Bootstrap. However, the bootstrap elements seem to be missing some styling. In particular b-nav, b-nav-item and b-badge, but probably most of the other types as well.

This is what it looks like: Vue-bootstrap does not render

Main template:

<div class="container-fluid">
   <b-nav tabs>
      <b-nav-item to="/lists">Verlanglijstjes</b-nav-item>
      <b-nav-item to="/ownlist">Eigen lijstje</b-nav-item>
      <b-nav-item to="/settings">Instellingen</b-nav-item>
      <div class="pull-right">
         <span>Ingelogd: {{ user }}, {{ household }}</span>
         <b-button variant="link" @click="logOff"><icon name="sign-out" class="button-icon"></icon>Uitloggen</b-button>
      </div>
   </b-nav>
</div>
<div class="container">
    <h1>Sinterklaas</h1>
   <router-view/>
</div>

Its child's template:

<div>
   <div v-for="item in items">
      <b-badge @click="deleteItem(item)" variant="danger"><icon name="trash"></icon></b-badge>
      <b-badge @click="editItem(item)" variant="primary"><icon name="pencil"></icon></b-badge>
      <span>{{ item.description }}</span>
   </div>
</div>

And here is main.js:

import Vue from 'vue';
import VueCookie from 'vue-cookie';
import BootstrapVue from 'bootstrap-vue';
import Icon from 'vue-awesome/components/Icon';
import App from './App';
import router from './router';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'vue-awesome/icons';

Vue.use(BootstrapVue);
Vue.use(VueCookie);
Vue.component('icon', Icon);
Vue.config.productionTip = false;

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

Upvotes: 2

Views: 3145

Answers (1)

Mielipuoli
Mielipuoli

Reputation: 1510

I found it!

import 'bootstrap/dist/css/bootstrap.min.css'

does not work. This should not be the minimalised css file.

Upvotes: 2

Related Questions