// 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
Developer and author at DigitalOcean.
How To Use Bootstrap 4 in Vue.js with BootstrapVue

Introduction

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.

Prerequisites

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:

src/main.js
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

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

new Vue({
  render: h => h(App),
}).$mount('#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:

src/components/BootstrapExample.vue
<template>
  <b-card
    title="Card Title"
    sub-title="Card Subtitle"
    style="max-width: 20rem;"
  >
    <b-tabs>
      <b-tab title="Tab 1">
        <b-card-text>Tab 1 Contents</b-card-text>
      </b-tab>
      <b-tab title="Tab 2">
        <b-card-text>Tab 2 Contents</b-card-text>
        <b-button
          size="md"
          variant="primary"
        >
          Button
        </b-button>
      </b-tab>
      <b-tab title="Tab 3" disabled>
        <b-card-text>Tab 3 Contents</b-card-text>
      </b-tab>
    </b-tabs>
  </b-card>
</template>

<script>
export default {
  name: 'BootstrapExample'
}
</script>

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

Conclusion

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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment