How can I use Bootstrap in Vue components?

5.3k views Asked by At

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 components?

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.com/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'
    
3

There are 3 answers

0
Hexodus On BEST ANSWER

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.

0
finiteloop On

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

1
Momin On

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.