How can I use Bootstrap in Vue components?

Question

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

index.html
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 components?

what I tried (with the same result)

Added official BootstrapCDN code to index.html

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";

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

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

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'
```

Are you using BootstrapVue? Or do you now want to? bootstrap-vue.org — finiteloop
– finiteloop, Commented Aug 28, 2020 at 17:45
No. No. I might have to. My site will also use Django + Bootstrap. — David Smolinski
– 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
– finiteloop, Commented Aug 28, 2020 at 18:22
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 common looking site, and more tutorials. — David Smolinski
– David Smolinski, Commented Aug 29, 2020 at 23:59

Hexodus · Accepted Answer · 2020-08-28 22:01:28Z

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.

answered Aug 28, 2020 at 22:01

Hexodus

13.1k6 gold badges58 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Momin · Accepted Answer · 2020-08-29 02:58:09Z

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.

finiteloop · Accepted Answer · 2020-08-29 02:33:56Z

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 components and directives’ here: https://bootstrap-vue.org/docs#component-groups-and-directives-as-vue-plugins

Collectives™ on Stack Overflow

How can I use Bootstrap in Vue components?

3 Answers 3

Comments

Adding bootstrap styles and javascript

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Adding bootstrap styles and javascript

1 Comment

Comments

Related