How to Import Bootstrap in Your VueJs Project

In this article, we'll show you how to import Bootstrap in your VueJs project.

How to Import Bootstrap in Your VueJs Project
Photo by Pankaj Patel / Unsplash

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