// Tutorial //

How To Use Bootstrap 4 in Vue.js with BootstrapVue

Published on April 10, 2017 · Updated on March 8, 2021
Default avatar

By Joshua Bemenderfer

How To Use Bootstrap 4 in Vue.js with BootstrapVue


Bootstrap is a library that provides common utilities for building web applications.

In this tutorial, you will be introduced to adding Boostrap in your Vue project with BootstrapVue.


If you would like to follow along with this article, you will need:

  • Familiarity with Vue components and props.
  • Some familiarity with using Bootstrap components and utilities may be beneficial but is not required.

This tutorial was verified with Node v15.11.0, npm v7.6.1, vue v2.6.11, bootstrap v4.6.0, and bootstrap-vue v2.21.2.

Step 1 — Setting Up the Project

To quickly set up the project, this article will recommend using @vue/cli.

Note: This article will take the approach of using npx to avoid a global installation of @vue/cli;

  1. npx @vue/cli create vue-bootstrap-example --default

Navigate to the newly created project directory;

  1. cd vue-bootstrap-example

bootstrap and bootstrap-vue can be installed through npm with the following command:

  1. npm install bootstrap@4.6.0 bootstrap-vue@2.21.2

Then, open the main.js file with your code editor. Import and use bootstrap-vue:

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import App from './App.vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false


new Vue({
  render: h => h(App),

This code will allow Bootstrap styles and icons to be available to the entire Vue application.

Step 2 — Using Vue Components

Here is an example component that utilizes Bootstrap cards, tabs, and buttons:

    title="Card Title"
    sub-title="Card Subtitle"
    style="max-width: 20rem;"
      <b-tab title="Tab 1">
        <b-card-text>Tab 1 Contents</b-card-text>
      <b-tab title="Tab 2">
        <b-card-text>Tab 2 Contents</b-card-text>
      <b-tab title="Tab 3" disabled>
        <b-card-text>Tab 3 Contents</b-card-text>

export default {
  name: 'BootstrapExample'

This code will generate a card with a title, a subtitle, and three tabs. The tabs will be labeled: “Tab 1”, “Tab 2”, “Tab 3”. The third tab will be disabled. Interacting with the tabs will display the respective contents. The second tab will also contain a button with the title: “Button”.


In this tutorial, you were introduced to adding Boostrap in your Vue project with BootstrapVue.

For additional information on the components and functionality available to you, consult the documentation.

If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors
Default avatar
Joshua Bemenderfer


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

card icon
Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Sign up
card icon
Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We’d like to help.

Learn more
card icon
Become a contributor

You get paid; we donate to tech nonprofits.

Learn more
Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow – whether you’re running one virtual machine or ten thousand.

Learn more ->
DigitalOcean Cloud Control Panel
Get started for free

Enter your email to get $200 in credit for your first 60 days with DigitalOcean.

New accounts only. By submitting your email you agree to our Privacy Policy.

© 2023 DigitalOcean, LLC.