Using Bootstrap 4 with Vue

In this article I'll show you how to integrate the latest version of Bootstrap (Bootstrap 4) with your Vue application.

Bootstrap 4 has many new features such as the use of Flexbox, ES6 modules and a new card component (which you can use to easily craft card-based layouts such as the famous Masonry layout without JavaScript/jQuery plugins or complex algorithms) etc.

You can use Bootstrap 4 to add mobile first styling to your Vue application without re-inventing the wheel and without having to acquire deep CSS knowledge particularly if you need to create complex and responsive layouts.

Bootstrap 4 requires jQuery and Popper.js. jQuery is a DOM library that makes a direct manipulation of the DOM unlike Vue which uses the virtual DOM approach so you'll want to avoid using jQuery within your Vue application but this means you won't be able to use many Bootstrap 4 components that requires jQuery?

Don't worry though the community has provided some packages that integrate Bootstrap 4 with Vue without resorting to jQuery. Let's see the most popular libraries

So let's get started with the first library that you can use to integrate your Vue application with Bootstrap 4


Head over to your terminal and navigate inside your Vue project then run the following command to intall bootstrap-vue

npm install bootstrap-vue bootstrap --save

bootstrap-vue requires Bootstrap CSS files so you need to install bootstrap too.

Next you'll need to enable the VueBootstrap plugin in your Vue app entry point.

import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"


new Vue({
  el: '#app',
  render: h => h(App)

You can also use these two templates to scaffold your Vue project webpack-simple and webpack which integrate bootstrap-vue out of the box.

For example this how you generate a new Vue project based bootstrap-vue/webpack-simple using the Vue CLI.

vue init bootstrap-vue/webpack-simple my-project
cd my-project 
npm install

You can then use different Bootstrap 4 components

  <b-button>This is a button</b-button>
  <b-button href="#">This is a link</b-button>


Using Bootstrap-Vue is the recommended way to integrate Bootstrap 4 with your Vue 2 application since it offers Vue components for Bootsrap components that requires jQuery.

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status