Using Bootstrap 4 with Vue.js

Joshua Bemenderfer

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.

Installation

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.

Components

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.

Usage

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>

Documentation

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

✖ Clear

🕵 Search Results

🔎 Searching...