Title rewritten as: Bootstrap issue in VueJS: app.scss not loading and b-alert dismissable button showing exception

Question

This is my first time using bootstrap in my vuejs project and there are two things that are unclear to me.

I followed the bootstrap in vuejs guide here and added step by step until I had to create app.scss and I decided to put it in the assets folder and once I imported that file in main.js I Will get a long error from vuejs.

Second question: I decided to ditch the global styles for app.scss (if that's the right term) and just give bootstrap a try, as a most basic example I found this example in the bootstrap playground and I copied and pasted it into my In the vue project.

Now I see the styling of some buttons, but the result is different from the output of the previously mentioned website.

My close button is gray, with a border and an X, and is to the left of the text. The X button in the playground example is to the right of the text, is styled correctly, has no border, and is green/blue.

This is probably very basic stuff but if someone could tell me what I'm doing wrong I'd be grateful because I followed the docs and searched honestly for 3 hours with no solution.

Answer 1

As Hiws pointed out in the comments above, this may be caused by the wrong Bootstrap version. I had the exact same problem when I had Bootstrap 5 installed, and when I switched to Bootstrap 4, the closeable dialog behaved the way I expected.