0

I recently switch to Vue-bootstrap. I wrote the following code:

<div>
    <div class="col-sm-3">
        <b-card no-body class="mb-1" border-variant="primary">
            <b-card-header header-tag="header" class="p-1" role="tab">
                <b-button block disabled href="#" v-b-toggle.accordion-1 variant="info">Search:</b-button>
            </b-card-header>
            <b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
                <b-card-body>
                    Why it works?
                </b-card-body>
            </b-collapse>
        </b-card>
    </div>
</div>

If I insert it into the live of the I get:

enter image description here

It contains a border. If I run locally the same code (except the text) I get:

enter image description here

Why does this happen?

In my webpack I compile properly:

 {
   // compile css files (basically, bootstrap)
   test: /\.css$/,
   use: ['style-loader', 'vue-style-loader', 'css-loader']
}

Also in both main.js and App.vue I have:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
vesii
  • 2,760
  • 4
  • 25
  • 71
  • **"Also in both main.js and App.vue I have"** Why both files instead of just main.js? – Hiws Mar 18 '20 at 14:38
  • Also, i checked your code with Bootstrap v4.x.x and this worked as you see on the docs. However, if i used Bootstrap v3.4.1 it shows up as in your screenshot (missing border). Recent Bootstrap-Vue only supports Bootstrap v4.3.1 and above. – Hiws Mar 18 '20 at 14:42
  • @Hiws, That is actually the right solution. You are welcomed to display it as the answer. – vesii Mar 18 '20 at 15:07
  • Which ones of them? The double import or using an older bootstrap version? – Hiws Mar 18 '20 at 15:14
  • the version one. The first approach was a way of trying to solve this issue. – vesii Mar 18 '20 at 15:15

1 Answers1

2

The issue is that you're probably using bootstrap v3.x.x, which Bootstrap-Vue hasn't supported for awhile. The current version (v2.7.0) only supports Bootstrap v4.3.1 and above.

Hiws
  • 8,230
  • 1
  • 19
  • 36