Starting with Bootstrap-Vue step by step

Setting up Bootstrap-Vue on Vue CLI

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality.
The project’s based on the world's most popular CSS framework - Bootstrap, for building responsive mobile-first landing page and combines it with Vue.js.
Bootstrap-Vue does not yet support Vue 3. So if you want to use Bootstrap-Vue you will have to stick with Vue 2 for now.
Let's get started.

So What is it?

Basically it's Bootstrap addon for Vue which provides benefits of both popular CSS framework Bootstrap providing looks and UI elements with another popular front-end framework Vue.js for building single page apps. With Bootstrap-Vue we would have to our disposition components, directives and also icon and theme set. Current version of Bootstrap-Vue is 2.21.2 (released 01-01-2021). It even has a ‘playground’ where you can write your test code and play with different features in a codepen like environment.

To use BootstrapVue, we import the widgets into our Vue app and reference the BootstrapVue components in our templates.
Bootstrap is now in version 4, but version 5 stable is soon to be released, read more about it in our recent article.

What do we need to work with Bootstrap-Vue

Prerequisites - what we will be working with in this article. We assume you are a bit familiar with Bootstrap and knowledge of JS of course as Vue.js is a Javascript framework.

We will be working with these, for instance Popper can be installed separately if needed.

  • Vue.js v2.6 is required, v2.6.12 is recommended
  • Bootstrap v4.3.1 is required, v4.5.3 is recommended
  • Popper.js v1.16 is required for dropdowns (and components based on dropdown), tooltips, and popovers. v1.16.1 is recommended
  • PortalVue v2.1 is required by Toasts, v2.1.7 is recommended
  • BootstrapVue does not depend on jQuery

Node Package Manager

We will use an npm tool/installer/package manager that comes also with Node.JS for install purposes. Npm is the recommended installation method when building large scale applications with Vue. To check if you have it installed, type the $ node -v on the terminal, this should show you the version installed.

Creating the App with Vue CLI 3

Let's start with building an App. Single page applications have a lot of advantages and by using the CLI version we will be able to use modern JS features which are not natively supported in browsers, it provides a live-reload dev server and it also minimizes our production code. Vue CLI is basically a full system for rapid Vue.js development.
Also we recommend installing it globally on your computer so you can use it in any Vue project in any folder.
The reason why we will use Vue version 2 is because BootstrapVue isn't compatible with Vue 3 yet.

1. Install Vue CLI 3

First we make sure we install Vue CLI globally, and we’ll get the latest version:
$npm install -g @vue/cli
Your should see something similar to this:
+ @vue/[email protected]
Or we can check for the version by running this command (note: it has double ‘-’ ) :
$vue --version

2. Initialize the project

Thanks to the previously installed CLI package we can utilize vue commands.
So to create application-basically to initialize the project we have two options:

  • via a graphic UI - which opens a graphical interface on your browser and there you can select what do you want with your project, install plugins, vuex, import project etc. We will use the other option.
  • via a terminal - this option we will choose in this article.


So now we are able to configure our app, were naming it for instance ‘testapp’,:
$ vue create testapp
If we see ‘bash: vue: command not found’ ,that means that we need to install Vue first.


This will ask us set of questions, we selected in “Manually select features”

  • Choose Vue version
  • Babel
  • Router
  • Linter/Formatter

On the next screen select Vue version 2.x, history mode for router : yes and EsLint + Prettier, Lint on save, dedicated config files and save preset :no.
This will create the project directory and inside it the file structure of the project for us.
Get inside the project directory by:
$cd testapp

To run development server, type the next command, it will enable opening our project in a browser to see live changes we make, it will refresh the page with every change to code.
$npm run serve
We should get a message that ‘App running at - Local: http://localhost:8080/.
Now we can open the browser on the address provided by the vue application and see the vue project is running.


3. Install Bootstrap-Vue and Bootstrap

With CTRL+C stop the server.
Since we want to use Bootstrap-vue it's time to install it, to do this, inside your project directory run:
$npm install bootstrap-vue
This should install Bootstrap too, but we can check if we have it by executing:

$npm install bootstrap

(Note1: Alternatively, if you're already are running some project and you would like to install BootstrapVue into it, you would use next command, there will be also question if we want to use babel/polyfill :
$vue add bootstrap-vue .)

(Note2: commands can be stacked like this and this will install all the packages in the command
$npm install vue bootstrap bootstrap-vue)

We should see similar result:

npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
+ [email protected]
+ [email protected]

We can look inside the package.json for all installed dependencies:

"dependencies": {
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"

4. Register BootstrapVue

Then, after installing Bootstrap-Vue we need to register it in your app entry point - so we navigate into src/main.js and we need to import these lines, add them before the last line with ‘new Vue()’ :

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip = false;
/*--------------------REGISTER BOOTSTRAP---------------------------------*/
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
// Import Bootstrap an BootstrapVue CSS files (order is important)
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
// Make BootstrapVue available throughout your project
// Optionally install the BootstrapVue icon components plugin
new Vue({
  render: (h) => h(App),

We have now bootstrap and we can start using it.

5. Additional tools

We recommend also installing the Vue Devtools in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface.
Get the Chrome Extension

Get the Firefox Addon


In VSC we recommend installing extension Vetur (by Pine Vu) for syntax highlighting, trust us, it’ll make your life much easier.

6. Vue Router

So how to implement Vue routing? When you use CLI, you should definitely use the option to set this up by default. But when you omit it or did not select it and now you want to implement it, you can by installing it additionally. @next will give us the latest version.
$npm i [email protected]

+ [email protected]
added 1 package and audited 1435 packages in 9.141s

We should see the index.js inside the ‘router’ folder - CLI install would do it for us). There we can define the proxy routes which the app will take upon changes in URL. Right now we should have a default path ‘/’ and path ‘/about’.

7. Run Vue dev server

Now start the server to make it accessible locally again with:
$npm run serve
(Note: in the package.json under ‘scripts’ we can see or set actually our own commands)

Bootstrap-Vue Components

Now we have everything we need to write the code. In the public folder/index.html we can see that there is an element ‘app’ in which is injected our application.
In the src folder, go to main.js and we could see the entry point. App.vue is like the root component now.

Right now what we see on our page is coming from the component folder - the HelloWorld.vue file, this is essentially what is doing the content on the page, we don't need this for our purposes here.

Layout and Grid System

Let's do some bootstrap examples here, for example a grid system.
You can build layouts of all shapes and sizes thanks to a twelve column system with Bootstrap-Vue system or you can always use the default Bootstrap only. Fluid attribute makes the container 100% of width regardless of viewport breakpoint. Now this shows our current code in App.vue.

  <div id="app">
<b-container fluid class="bv-example-row">
        <b-col md="4" class="bg-success">1 of 3</b-col>
        <b-col class="bg-info">2 of 3</b-col>
        <b-col class="bg-danger">3 of 3</b-col>
<div id="nav">
     <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>
<router-view />

The md=”4” means that from the view size medium it will no longer take full width of 12 columns, but only 4 columns and the rest of the elements would be beside the first one, quite the same as in Bootstrap.

In the browser inspector we select a specific element and we can view its CSS classes under Filters Styles, there we can also add a new class for testing purposes.


Now we create a simple button - we place it into Home.vue, and the exported component will show our button on the screen along with other components thanks to routing.

    <b-button size="lg" variant="outline-primary">
      Hello, click me!
export default {
  name: "Home",
  components: {
  data() {
    return {
      name: "This is dismissible alert",

There are many components like these we showed above, check them out on Bootstrap-Vue Component page.
As a matter of fact, the documentation between Bootstrap-Vue and classic Bootstrap is stylized almost the same, everything is very familiar when you're used to Bootstrap.

Dismissible alert

Let’s do the button work to show the message on the screen. We go to Home.vue and we add a <b-alert> element, v-show is conditional if something will be shown or not. To the condition we can add a boolean property with value:false, so for now it won't be shown.(If you write ‘true’ it will show). Now this value we will modify with the button. Button obtains v-on or @ in which we put the name of the method it will execute. The method is written so the boolean data in ‘showAlert’ will change to ‘true’ and the alert would be presented.

    <b-button @click="alertUser" size="lg" variant="outline-primary">
      Hello, click me!
    <b-alert v-show="showAlert" show dismissible> {{ name }}! </b-alert>
export default {
  name: "Home",
  components: {
  data() {
    return {
      name: "This is dismissible alert",
      showAlert: false,
  methods: {
    alertUser() {
      return this.showAlert = true;



The last chapter is about deployment of the Vue application.
Vue CLI generates the built files in the correct location, which will create a folder named ‘dist’ where all the distribution files would be - what you actually deploy to the production server.
$npm run build


To test the distribution version we can test it by running next commands to serve the dist folder.

$npm i -g serve
 $serve -s dist


Some say Bootstrap-Vue is a bloatware and they wont touch it even with a stick and on the other side we see download growth from github on the npm graph (2020-2021). It has pretty good documentation to explain everything.

In general, most of the libraries don't support Vue 3 yet, so I would suggest waiting a bit longer before using it until the ecosystem has caught up.

This concludes our today’s article, we hope that you like it.

Image by Tibor Kopca

by Tibor Kopca Date: 13-04-2021 Bootstrap-Vue Bootstrap Vue JavaScript Web Development Framework CSS hits : 1369  
Tibor Kopca

Tibor Kopca

From tinkering with computers as a teenager, through a career in datacenter he stepped into web development with full force and started coding. Absorbs all information like a sponge.
Fan of aerospace, engineering, information technologies and watches.


Related Posts

Dates in local format with Javascript

In the articles we have about dates in JavaScript we were missing one about how to create dates in local format with JavaScript. That is to say, being able to…

Formatting hours in Javascript

Continuing with the set of articles that talk about internationalisation elements, like the previous one where we talked about relative dates in JavaScript, we will see in this one how…

Request data with prompt in JavaScript

After having published several articles about how to manipulate arrays and dates, today I will publish a post that some of you will find too basic and others will find…

Relative dates in JavaScript

One of the interesting things about the internationalisation library represented in the Int object is the handling of relative dates in Javascript. This handling allows us to represent a date…

How to access webcam and grab an image using HTML5 and Javascript

We often use webcams to broadcast video in real time via our computer. This broadcast can be viewed, saved and even shared via the Internet. As a rule, we need…

The JavaScript forEach loop

We have already talked about how to handle some of loops  types in Javascript including for, for-in and for-off loops. In the case of today we are going to see how…

What are React Hooks and what problems they solve

Working with React, - and before the release of Hooks in version 16.8 -  there was always the possibility to create components in three different ways based on a number of…

Flattening arrays in JavaScript

When we are handling arrays that are arrays or have multiple dimensions it can be very useful to know how to flatten arrays in JavaScript. That is to say, to…

How to populate an array with random numbers in JavaScript

Some of you might think that what we explained in the article on how to populate an array with numbers, apart from the didactic part, would not have much applicability…

How to populate an array with numbers in JavaScript

Populate an array with numbers in JavaScript The first step is to initialise the array. So today we are going to see a simple way to do it and see how…

Top Javascript Libraries and Frameworks Part 2

What are JavaScript frameworks?   JavaScript frameworks are application frameworks that allow developers to manipulate code to meet their particular needs. Web application development is like building a house. You have the option…

How to Send Email from an HTML Contact Form

In today’s article we will write about how to make a working form that upon hitting that submit button will be functional and send the email (to you as a…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration