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.

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

Navigate to the newly created project directory;

cd vue-bootstrap-example

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

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

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:

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