I put the same html (with Bootstrap 4.5.2) in these 2 places.

1. index.html
2. App.vue

In index.html, the Bootstrap style works. In App.vue, the space between buttons fails. I fixed this by adding class mr-1 to the buttons. How do I avoid having to fix normal Bootstrap when putting it in ponents?

what I tried (with the same result)

1. Added official BootstrapCDN code to index.html

2. Added this to main.js and installed the modules

   import jQuery from "jquery";
   global.jQuery = jQuery;
   let Bootstrap = require("bootstrap");
   import "bootstrap/dist/css/bootstrap.css";
   

3. Added this in the <style> section of App.vue

   @import url('.5.2/css/bootstrap.min.css');
   

4. Momin's suggestion:

   installed everything in the project folder dir

   npm install bootstrap jquery popper.js

   added this to the top of main.js:

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

I put the same html (with Bootstrap 4.5.2) in these 2 places.

1. index.html
2. App.vue

In index.html, the Bootstrap style works. In App.vue, the space between buttons fails. I fixed this by adding class mr-1 to the buttons. How do I avoid having to fix normal Bootstrap when putting it in ponents?

what I tried (with the same result)

1. Added official BootstrapCDN code to index.html

2. Added this to main.js and installed the modules

   import jQuery from "jquery";
   global.jQuery = jQuery;
   let Bootstrap = require("bootstrap");
   import "bootstrap/dist/css/bootstrap.css";
   

3. Added this in the <style> section of App.vue

   @import url('https://stackpath.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css');
   

4. Momin's suggestion:

   installed everything in the project folder dir

   npm install bootstrap jquery popper.js

   added this to the top of main.js:

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

• javascript
• html
• vue.js
• bootstrap-4

• 1 Are you using BootstrapVue? Or do you now want to? bootstrap-vue – finiteloop Commented Aug 28, 2020 at 17:45
• 1 No. No. I might have to. My site will also use Django + Bootstrap. – David Smolinski Commented Aug 28, 2020 at 18:13
• @DavidSmolinkski I don’t think you would necessarily need to, but I have used BootstrapVue before and I’ve found it to be pretty useful and easy to implement. It’s definitely worth checking into :) – finiteloop Commented Aug 28, 2020 at 18:22
• 1 I'm 90% sure I will use Vuetify. It has lots of video tutorials, and I should learn a UI framework. In the 1 or 2 years I've studied code, I have mostly eliminated my need to read outside of videos. I will still try to make pure Bootstrap work. The Django templates will have Bootstrap. I chose Bootstrap so I could have fewer choices, a mon looking site, and more tutorials. – David Smolinski Commented Aug 29, 2020 at 23:59

3 Answers 3

If you need Bootstrap, just go with BootsrapVue which does the heavy lifting for you. Should you still be open for other choices, Vuetifyjs is a really good framework with much to offer.

Adding bootstrap styles and javascript

In your project directory install Bootstrap and its dependencies.

npm install bootstrap jquery popper.js

If you’re not going to use Bootstrap’s JavaScript and only going to use its styles, don’t worry about installing jQuery or Popper.js

Finally, import it into the main script by adding these lines to the top of project/src/main.js:

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

Repeat, if you just want the styles and not the JavaScript functionality, just drop off the first line and only include the CSS.

BootstrapVue is a good choice, but it really is up to you. People can suggest other alternatives all day (e.g Tailwind Vue). BootstrapVue is nice because if you are already familiar with Bootstrap you will be mostly familiar with BootstrapVue straight away. Again, if it does work for your purposes then go with it.

I personally like the feature of including just what you need.

Read more about that in the BootstrapVue docs ‘Individual ponents and directives’ here: https://bootstrap-vue/docs#ponent-groups-and-directives-as-vue-plugins