How to use bootstrap in vue

Question

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?

If you upgrade to bootstrap-5 you won't need to use a 3rd party lib like bootstrap-vue since jquery is no longer needed: stackoverflow.com/questions/65547199/… — Carol Skelly
– Carol Skelly, Commented Jan 22, 2021 at 13:07

wiltonsr · Accepted Answer · 2021-01-22 11:43:17Z

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)

edited Jan 22, 2021 at 11:43

wiltonsr

1,0379 silver badges22 bronze badges

answered Jan 22, 2021 at 11:39

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

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

4 Comments

HUNcut_ Over a year ago

Can I use the basic way of just putting classes on things, or I have to use the custom tags they provide?

Amaarockz Over a year ago

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 Over a year ago

if you found this answer useful, pls consider giving it an upvote .. thanks:)\

Hiws Over a year ago

@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.

Collectives™ on Stack Overflow

How to use bootstrap in vue

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related