Build a Bootstrap 4 & Vue App
Tags: vue, bootstrap
Published: 2020-07-29 00:00:00

---
layout: post
title:  Build a Bootstrap 4 & Vue App
description: "Learn to build a Bootstrap 4 web app with Vue as the JavaScript framework (rather than jQuery)."
cover_image: https://vuejsdevelopers.com/images/posts/versions/bootstrap_vue_1200.webp
date: 2020/07/29
published: true
tags: #vuejs #bootstrap
code: 83c
level: beginner
ad: ev
---

Bootstrap 4 continues to be the most popular framework for creating web apps. It's a shame that the jQuery dependency makes it less powerful than it could be!

Fortunately, it's fairly easy to swap jQuery for Vue to make a far simpler and more flexible development experience.

In this tutorial, I'll show you how easy it is to set up a Bootstrap 4 project with Vue. To do this, we'll be using Bootstrap-Vue, Vue CLI, and Vue 2.6. I'll assume you already know the basics of both Bootstrap and Vue.

<table-of-contents />
*Note: this article was originally posted [here on the Vue.js Developers blog](https://vuejsdevelopers.com/2020/07/29/bootstrap-vue?utm_source=devto&utm_medium=article&utm_campaign=83c) on 2020/07/24.*

## Setting up a Bootstrap and Vue project

The [Bootstrap-Vue](https://bootstrap-vue.org/docs) project has done most of the heavy lifting of replacing jQuery with Vue by implementing Bootstrap features as Vue components.

Rather than installing it directly, we can use Bootstrap-Vue as a Vue CLI plugin. This takes care of any configuration boilerplate and will automatically add any dependencies so I highly recommend this approach.

Let's create a new Vue CLI project:

```bash
$ vue create bootstrap-vue-app
```

> Note that you will need to have Vue CLI installed in your dev environment already ([instructions here](https://cli.vuejs.org/guide/installation.html)).

Vue CLI will now take you through the Vue app setup. If you aren't sure what options to choose, just select "default".

Now, change into your new project directory:

```bash
$ cd bootstrap-vue-app
```

You can now add the Bootstrap-Vue plugin to your project. Unless you have reasons otherwise, I suggest you select "Y" for any prompts.

```bash
$ vue add bootstrap-vue
```

Thanks to the magic of Vue CLI, you have now set up a best-practice Vue & Bootstrap project with no configuration required!

## Clearing out boilerplate

By default, Vue CLI provides a boilerplate app for you to begin with. Let's clear the content of *App.vue* as we'll still need that file, but we can delete *HelloWorld.vue* all together.

```bash
$ > src/components/App.vue
$ rm src/components/HelloWorld.vue
```

## Bootstrap-Vue components

Almost all of the features of Bootstrap are available as globally registered components in Bootstrap-Vue.

These generally have the same names as the Bootstrap components, but to distinguish them from other components, they're prefixed with `b-`. 

For example, let's create a new template in *App.vue* and add a Bootstrap container. This is packaged in the component `b-container`.

*src/App.vue*

```html
<template>
  <b-container>
    <p>Hello, Bootstrap-Vue</p>
  </b-container>
</template>
```

Let's now serve the app we've created

```bash
$ npm run serve
```

Once the code has built, you should see the following:

![Bootstrap Vue 1](https://vuejsdevelopers.com/images/posts/bootstrap_vue_1.png)

Also, if you check the page content, you'll see this `b-container` component has rendered with conventional Bootstrap elements and classes:

```html
<div class="container">
  <p>Hello, Bootstrap-Vue</p>
</div>
``` 

<content-ad />

## Configuration with props

Many of the available components can be configured with Vue props. 

For example, let's add a button to our app using the `b-btn` component. This component has a prop `variant` which controls the theme. Let's set it to `primary`.

```html
<template>
  <b-container>
    <p>Hello, Bootstrap-Vue</p>
    <b-btn variant="primary">Click</b-btn>
  </b-container>
</template>
```

![Bootstrap Vue 2](https://vuejsdevelopers.com/images/posts/bootstrap_vue_2.png)

We can also bind dynamic values to our Bootstrap components. For example, let's add an alert using the `b-alert` component. We'll make it a made the alert `success` and give it some content. 

```html
<template>
  <b-container>
    <p>Hello, Bootstrap-Vue</p>
    <b-btn variant="primary">Click</b-btn>
    <b-alert variant="success">
      You clicked the button!
    </b-alert>
  </b-container>
</template>
```


Now, we'll conditionally show the alert by binding the `show` prop to a local data property `showAlert`. We'll now toggle the value of `showAlert` in response to the `click` event of the `b-btn` component.

```html
<template>
  <b-container>
    <p>Hello, Bootstrap-Vue</p>
    <b-btn 
      variant="primary"
      @click="showAlert = true"
    >
      Click
    </b-btn>
    <b-alert 
      v-bind:show="showAlert"
      variant="success"
    >
      You clicked the button!
    </b-alert>
  </b-container>
</template>
<script>
export default {
  data: () => ({
    showAlert: false
  })
};
</script>
```

![Bootstrap Vue 3](https://vuejsdevelopers.com/images/posts/bootstrap_vue_3.png)

So much easier than jQuery, right?

## Bootstrap-Vue directives

Some Bootstrap features are provided as directives rather than components so that they can be easily added to existing elements. 

For example, to add a tooltip feature, we can use the `v-b-tooltip` directive. Let's add one to the button using the directive argument `hover` so it's triggered by the button hover event.

```html
<b-btn
  variant="primary"
  @click="showAlert = true"
  v-b-tooltip.hover 
  title="This button triggers the alert"
>
  Click
</b-btn>
```

> Note: the tooltip plugin requires a dependency of *popper.js* but this will be automatically included if you install Bootstrap-Vue with Vue CLI.

![Bootstrap Vue 4](https://vuejsdevelopers.com/images/posts/bootstrap_vue_4.png)

## Wrap up

Now you can see how easy it is to replace jQuery in Bootstrap 4 with Vue. Let me know if you have any additional questions in the comments below.

* * *

**Enjoy this article?**

Get more articles like this in your inbox weekly with the *Vue.js Developers Newsletter*.

[Click here to join!](https://vuejsdevelopers.com/newsletter?utm_source=devto&utm_medium=article)