How to Import Bootstrap in Your VueJs Project

Vishal Basumatary -

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.

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

  1. 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,
...
})