1

I am trying to use Bootstrap in my Vue project. (created with the Vue cli)
I have installed the following things through npm.

  • Bootstrap 4.6.0
  • Popper.js 1.16.1
  • Jquery 3.5.1

I have imported Bootsrap into my main.js

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

The problem is that I can't use the dropdowns in Bootsrap.
Is there anything else I should do?

HUNcut_
  • 47
  • 7
  • If you upgrade to [tag:bootstrap-5] you won't need to use a 3rd party lib like bootstrap-vue since jquery is no longer needed: https://stackoverflow.com/questions/65547199/using-bootstrap-5-with-vue-3 – Carol Skelly Jan 22 '21 at 13:07

1 Answers1

2

there is bootstrap package specially for vue you can use the following commands to install it

npm install bootstrap-vue

OR

yarn add bootstrap-vue

and then in your main.js file you can import it and use it as

import BootstrapVue from 'bootstrap-vue';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Vue.use(BootstrapVue)
wiltonsr
  • 639
  • 5
  • 16
Amaarockz
  • 4,348
  • 2
  • 9
  • 27
  • Can I use the basic way of just putting classes on things, or I have to use the custom tags they provide? – HUNcut_ Jan 22 '21 at 11:43
  • 1
    you need to use the custom tags that they mention in the docs and it also depends whether you use scoped/non-scoped stylings – Amaarockz Jan 22 '21 at 11:44
  • if you found this answer useful, pls consider giving it an upvote .. thanks:)\ – Amaarockz Jan 22 '21 at 11:52
  • 1
    @HUNcut_ `Can I use the basic way of just putting classes on things`, Yes you can. You don't *have* to use the components, though I do recommend it, as it's usually less markup, and more unified. However, this is only valid for stuff that's 100% CSS based. For components that usually require Bootstrap.js like Modals, Dropdowns, Toasts, Popover/Tooltips, ect.. You will need to use their vue component counterparts. – Hiws Jan 22 '21 at 12:32