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 modulesimport 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'
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.