Tutorial

How To Use Bootstrap 4 in Vue.js with BootstrapVue

Updated on March 8, 2021
Default avatar

By Joshua Bemenderfer

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.

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

author

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

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

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

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

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