How to Import Bootstrap in Your VueJs Project
In this article, we'll show you how to import Bootstrap in your VueJs project.
Assuming that you are using a Node.js-based build tool like Webpack, you can import BootstrapVue into your project from a BootstrapVue NPM package.
- Install the BootstrapVue NPM package:
npm install bootstrap-vue --save
2. In your main JavaScript file (e.g. src/main.js), import the BootstrapVue plugin:
import BootstrapVue from 'bootstrap-vue'
3. Use the BootstrapVue plugin in your Vue instance:
new Vue({
bootstrapVue,
...
})
4. Include the precompiled Bootstrap CSS in your HTML file (e.g. index.html):
<link rel="stylesheet" href="[<https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css>](<https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css>)">
Or alternatively, you can import the Bootstrap CSS from a BootstrapVue NPM package.
- Install the BootstrapVue NPM package:
npm install bootstrap-vue --save
2. In your main JavaScript file (e.g. src/main.js), import the precompiled Bootstrap CSS:
import 'bootstrap-vue/dist/bootstrap-vue.css'
3. Use the BootstrapVue plugin in your Vue instance:
new Vue({
bootstrapVue,
...
})
