The Bootstrap 4 beta is “right around the corner,” and I’m sure there are plenty who are excited to start using it with Vue. Well, they already can, using bootstrap-vue. However, be warned that bootstrap-vue (like Bootstrap 4) is not yet stable, and usage may change between releases.

As usual, bootstrap-vue can be installed from NPM or Yarn. You’ll also want to install the normal bootstrap package for styles.

# Yarn $ yarn add bootstrap-vue bootstrap # NPM $ npm install bootstrap-vue bootstrap --save 

Then, in your app’s main file, enable the VueBootstrap plugin.

main.js

import Vue from 'vue'; import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'; import App from 'App.vue'; // Import the styles directly. (Or you could add them via script tags.) import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap-vue/dist/bootstrap-vue.css'; Vue.use(BootstrapVue); new Vue({ el: '#app', render: h => h(App) }); 

NOTE: Styles are injected globally and may affect other components. Use with care.

vue-bootstrap’s current roster of components includes most of the interactive Bootstrap 4 components: Alert, Badge, Breadcrumb, Button, Button group, Card, Collapse, Dropdown, The Usual Form Elements, Jumbotron, List group, Modal, Nav, Navbar, Pagination, Popover, Progress, Table and Tabs

NOTE: You don’t need to worry about including Bootstrap’s JS, interactivity is handled by the components.

Just use the various components in your app as normal! Non-interactive elements are still handled via CSS, so don’t get too worried about it deprecating all your current Bootstrap knowledge.

<template> <b-card no-block> <b-tabs> <b-tab title="Tab 1"> Tab 1 Contents </b-tab> <b-tab title="Tab 2"> Tab 2 Contents <b-button size="md">Boop</b-button> </b-tab> <b-tab title="Tab 3" disabled> Tab 3 Contents </b-tab> </b-tabs> </b-card> </template> 

Obviously there’s not a lot here to help you write a complete app, so consult the docs for Bootstrap Vue, and Bootstrap 4.