Integrating Bootstrap with Vue.js Using Bootstrap-Vue

Share this article

Integrating Bootstrap with Vue.js using Bootstrap-Vue

In this article, we’ll explore how to integrate Bootstrap with Vue.js using Bootstrap-Vue.

React and Vue.js are two leading, modern JavaScript frameworks for front-end development. While React has a steep learning curve, and a complex build process (if you’re coming from the jQuery world), all you need to do to start using Vue.js is a simple import script:

<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>

Bootstrap has become a popular HTML/CSS framework for building mobile responsive websites. However, it relies mostly on jQuery for its core features as well as its extensive list of components — such as alerts, and modals. So we’ll explore how to use Bootstrap with Vue.js, thereby removing the need for jQuery.

Key Takeaways

  • Bootstrap-Vue combines the Bootstrap framework with Vue.js, allowing developers to use Bootstrap components as Vue components, thus eliminating the need for jQuery.
  • Bootstrap-Vue can be installed via npm and provides two vue-cli templates for quick scaffolding of small and large projects.
  • Bootstrap-Vue components can be imported with a script tag in the HTML document’s head section, pulling in the minified, latest versions of each library.
  • Bootstrap-Vue offers a range of components, such as alerts and listviews, which can be made dynamic with Vue.js directives. It also supports event listening on components, making it easier to build interactive applications.

Introducing Bootstrap

Originally created in late 2011 by Mark Otto and Jacob Thornton at Twitter Inc., Bootstrap soon found popularity outside Twitter after being open-sourced. It continued to grow as the fastest front-end framework for web developers worldwide.

Today, Bootstrap has become the de-facto standard for starting a new website project, with its CSS and JS architecture providing mobile responsive and common UI components, along with support for most modern browsers.

Connecting Bootstrap with Vue.js

As we mentioned earlier, using with Bootstrap with Vue.js is slightly tricky, because of Bootstrap’s dynamic components’ heavy dependency on jQuery. However, there are at least a couple of good projects that are in the process of bridging that gap:

We’ll explore the first option here, Bootstrap-Vue, since it’s the most updated and popular project.

Bootstrap-Vue

Bootstrap-Vue not only supports the Bootstrap components and grid system, but also includes support for Vue.js Directives, which gives us the full feature set from the Vue.js ecosystem.

One of the cool features of Bootstrap-Vue is that it has an online Playground. This playground is hot-reloaded and also lets us export our code to JSFiddle. Isn’t that cool!

I believe a good documentation and developer ecosystem is necessary for the success of any software project, and Bootstrap-Vue ticks all the checkboxes.

Getting Started with Bootstrap-Vue Using the Command Line

If you’ve been following modern web development trends, you’d definitely know about npm and installing libraries with it. Bootstrap-Vue can be installed with npm through the following command:

npm i bootstrap-vue

Bootstrap-Vue also provides two vue-cli templates that can scaffold our projects without too much hassle:

  • webpack simple: quick scaffold for a small application.
  • webpack: for larger production capable projects.

First, we install the vue-cli by:

npm i -g vue-cli

Then, we initialize our project — let’s call it getting-started — using the webpack-simple template by typing the following in the terminal:

vue init bootstrap-vue/webpack-simple getting-started

A wizard will open. You can press Return to accept the defaults.

Then, type:

cd getting-started
npm install
npm run dev

Let’s look at this code line by line:

  • The first line starts with vue init creates a new directory called getting-started, where a new Bootstrap-Vue project is initialized.
  • With cd getting-started, we access the new project’s directory.
  • npm install takes care of installing all the project’s dependencies.
  • Finally, with npm run dev, the app is compiled and launched in the browser.

Your local environment should now contain the following files and folders:

├── index.html
├── node_modules
│   └── lots of files
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js

Here, App.vue and main.js are the primary files of interest. If we fire up our text editor and open main.js, we’ll see the following code, which imports the Bootstrap style sheet and Bootstrap-Vue:

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"

Vue.use(BootstrapVue)

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

At the same time, the App.vue document loads up the front-end code.

After running the npm run dev command, the project’s index.html page should render a page like the one below:

Vue.js splash page

Importing Bootstrap-Vue with a script Tag in the Document <head> Section

While we saw the npm way of installing and working with Bootstrap-Vue, let’s also look at the simpler option: including Bootstrap-Vue using a script tag in our HTML document:

<!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>

<!-- Add Vue and Bootstrap-Vue JS just before the closing </body> tag -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

This will pull in the minified, latest version of each library. At the time of writing, this is Bootstrap v4.1.3, Bootstrap-Vue v2.0.0-rc.11, and Vue v2.5.17.

If for some reason you need to support legacy browsers, you can also include the @babel/polyfill, which will emulate a full ES2015+ environment:

<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>

Now we can work with Vue.js, Bootstrap, and Bootstrap-Vue on our local machine.

Working With Bootstrap-Vue Components

For the demos in this article, we’ll use CodePen. To set it up, let’s create our Pen, click on the settings icon, and import the following CSS in the CSS tab:

https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css
https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css

In the JavaScript tab, let’s import the Vue and Bootstrap Vue libraries:

https://unpkg.com/vue@2.5.17/dist/vue.min.js
https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js

Also, make sure to select Babel as the JavaScript preprocessor.

Finally, let’s click the Save & Close button. Now we’re ready to start playing with Bootstrap-Vue components.

Building a Bootstrap-Vue Alert Component

To create a Bootstrap-Vue alert component, we’re going to add the following to our CodePen HTML area:

<div id='app'>
  <b-alert show> Hello {{ name }}! </b-alert>
</div>

Next, we add the Vue instance to the JS area:

new Vue({
  el: "#app",
  data: {
    name: "Sitepoint"
  }
});

As a result, we should see the “Hello Sitepoint!” alert in the output view area:

See the Pen Getting Started with Bootstrap Vue by SitePoint (@SitePoint) on CodePen.

The above code displays a simple Bootstrap alert component using Vue.js and Bootstrap-Vue. Next, we’re going to change some of the parameters for this alert box to make it more interesting. For example, to make the alert box dismissible, let’s add the keyword dismissible next to the show directive:

<b-alert show dismissible> Hello {{ name }}! </b-alert>

Now the alert displays a dismiss icon button, which, when clicked, removes the alert from the page. Try it out for yourself!

Refer to the official documentation for Bootstrap-Vue alerts for more configurable props.

Building a Dynamic Bootstrap-Vue Listview Component

So now that we have got a good idea of how to use Bootstrap-Vue, let’s build a list component. This is perhaps the most common piece of UI you’ll find in web and mobile apps.

Bootstrap-Vue provides two components that together help us to build a list: <b-list-group> and <b-list-group-item>. We can think of the former as the HTML equivalent of a <ul> or <ol> tag, while the latter renders a <li> element.

We start by building a static list of some smartphones:

<div id='app'>
  <b-list-group>
    <b-list-group-item href="http://apple.com">iPhone</b-list-group-item>
    <b-list-group-item>OnePlus 3T</b-list-group-item>
    <b-list-group-item>Samsung Galaxy 8</b-list-group-item>
  </b-list-group>
</div>

Now, we add our Vue instance in the JavaScript panel:

new Vue({
  el: '#app'
});

And here’s our simple list:

Static Bootstrap-Vue list

However, this is nowhere close to being a dynamic list. Let’s add the Vue.js v-for directive inside the list component’s markup to render a few list items from an array:

<b-list-group-item v-for="item in items">
  {{ item.message }}
</b-list-group-item>

Next, let’s add the items array to the Vue instance:

new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Nokia 8' },
      { message: 'OnePlus 5T' },
      { message: 'Samsung Galaxy S9' }
    ]
  }
});

And here’s our smartphone data displayed in the Bootstrap-Vue list component:

Dynamic Bootstrap-Vue list

Have a play with the live demo:

See the Pen ListView with Bootstrap Vue by SitePoint (@SitePoint) on CodePen.

As a challenge for you, try making this list even more dynamic by adding an Ajax call to pull in content from an API or from an RSS feed.

Listening to Events on Bootstrap Badges

Bootstrap has a badge component which is useful for keeping count of items or labeling them. For example, in the list example above, we could add a badge to the iPhone list item indicating the number of variants (five versions of iPhone).

With Bootstrap-Vue, we can use the <b-badge> component as a child of the <b-list-group-item> element to indicate the number of the various iPhone types as follows:

<b-list-group-item href="http://apple.com">iPhone <b-badge>5</b-badge></b-list-group-item>

This should render the list looking like this:

Bootstrap-Vue list with badge

Now, let’s add a share this button on our page to keep track of the page’s number of shares. To accomplish this, we can use the <b-button> component to create a Bootstrap button and within the button we’ll nest the <b-badge> child element:

<div class="text-center">
  <b-button variant="primary" size="sm">
    Share on Twitter <b-badge variant="light">{{ share_count }}</b-badge>
  </b-button>
</div>

We modify our JavaScript code by adding a share_count variable, which will keep track of the number of times our page is shared:

new Vue({
  el: '#app',
  data: {
    share_count:0
  }
});

This should give us the following output:

Bootstrap-Vue share button badge

Note, the button is still not dynamic. That is, it won’t increment the share counter when we click on the Share on Twitter button, as we haven’t added an event listener to the button yet. We’ll use the Vue.js v-on directive to listen to the button click event:

<b-button variant="primary" size="sm" v-on:click="share_count += 1">

This makes the share_count variable increment whenever we click on the button. The code for the badge need not change, since it’s already bound to the share_count variable. Therefore, whenever the button is clicked, the share_count variable is incremented and so is the badge.

That’s the beauty of Vue.js data binding!

See the Pen Listening to Events on Badges. by SitePoint (@SitePoint) on CodePen.

Conclusion

In this tutorial, we’ve seen how to use Bootstrap-Vue to add Bootstrap-like components to Vue.js applications.

Now it’s over to you: build the next awesome Bootstrap-Vue web page and share it with the world!

If you’ve got the basics of Bootstrap under your belt but are wondering how to take your Bootstrap skills to the next level, check out our Building Your First Website with Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.

Frequently Asked Questions (FAQs) about Bootstrap Vue

What are the key differences between Bootstrap and Bootstrap Vue?

Bootstrap is a popular framework for building responsive, mobile-first sites using HTML, CSS, and JavaScript. It provides pre-designed components and styles that make it easier to create a professional-looking website. On the other hand, Bootstrap Vue is a library that combines Bootstrap and Vue.js. It allows you to use Bootstrap components as Vue components in a Vue.js application. This means you can take advantage of Vue.js’s reactivity system while still using familiar Bootstrap styles and components.

How do I install Bootstrap Vue in my project?

To install Bootstrap Vue, you need to have Node.js and npm installed on your computer. Once you have these, you can install Bootstrap Vue by running the following command in your terminal: npm install bootstrap-vue. After installation, you can import Bootstrap Vue into your project by adding the following lines to your main.js file: import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' and Vue.use(BootstrapVue). Don’t forget to import the Bootstrap CSS and Bootstrap Vue CSS files as well.

Can I use Bootstrap Vue with an existing Vue.js project?

Yes, you can use Bootstrap Vue with an existing Vue.js project. You just need to install Bootstrap Vue using npm and then import it into your project. This allows you to use Bootstrap components as Vue components, making it easier to build responsive, mobile-first applications.

How do I use Bootstrap Vue components in my Vue.js application?

After installing and importing Bootstrap Vue into your project, you can use Bootstrap components as Vue components. For example, to use a Bootstrap button, you would write <b-button variant="primary">Primary Button</b-button> in your Vue template. The b- prefix is used to distinguish Bootstrap Vue components from regular HTML elements and other Vue components.

What are some advantages of using Bootstrap Vue over regular Bootstrap?

Bootstrap Vue offers several advantages over regular Bootstrap. First, it allows you to use Bootstrap components as Vue components, which means you can take advantage of Vue.js’s reactivity system. Second, Bootstrap Vue components are automatically compatible with Vue.js directives and transitions, making it easier to build dynamic, interactive applications. Finally, Bootstrap Vue provides additional custom components and directives that are not available in regular Bootstrap.

Are there any limitations or drawbacks to using Bootstrap Vue?

While Bootstrap Vue offers many advantages, there are a few limitations to be aware of. First, it requires knowledge of both Bootstrap and Vue.js, which may be a learning curve for some developers. Second, because it’s a library that combines two frameworks, it may not be as lightweight or performant as using Vue.js or Bootstrap alone. Finally, while Bootstrap Vue is actively maintained, it may not always be up-to-date with the latest versions of Bootstrap or Vue.js.

Can I customize the styles of Bootstrap Vue components?

Yes, you can customize the styles of Bootstrap Vue components. You can do this by overriding the default Bootstrap CSS styles in your own CSS files. However, be aware that this may affect the responsiveness and cross-browser compatibility of your application.

How do I handle events in Bootstrap Vue?

Handling events in Bootstrap Vue is similar to handling events in regular Vue.js. You can use the v-on directive or the @ shorthand to listen for events on Bootstrap Vue components. For example, to listen for a click event on a Bootstrap button, you would write <b-button @click="handleClick">Click me</b-button> in your Vue template.

Does Bootstrap Vue support server-side rendering (SSR)?

Yes, Bootstrap Vue supports server-side rendering (SSR). This means you can use it to build Vue.js applications that are rendered on the server, improving the performance and SEO of your application.

Where can I find more resources and documentation on Bootstrap Vue?

You can find more resources and documentation on Bootstrap Vue on the official Bootstrap Vue website (https://bootstrap-vue.org/). The documentation includes a comprehensive guide on how to use Bootstrap Vue, as well as API references for all the components and directives. You can also find examples and starter templates to help you get started with your project.

Zeeshan ChawdharyZeeshan Chawdhary
View Author

Zeeshan Chawdhary started programming when in school on DOS using GWBasic, DBASE III Plus & Foxpro, he had the privilege to work on the early Macintosh'es, pre Windows 95 era. A senior tech professional with 13 years of experience in building Web and Mobile Apps. He has worked extensively in Travel Tech, eCommerce and Transportation Industry. He has dabbled on most tech stacks - Java, .Net and PHP/LAMP. He is currently in love with Laravel, VueJS, iOS with Swift 4, WordPress, PostGIS and React Native and tries his hand at blogging at https://justgeeks.in

bootstrapbootstrap-hubBootstrap-tutorialsbootstrap-vuevuevue-hubvue-toolsvue.js
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week