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.