Report an issueEdit this page

Starter Templates

There are several ways you can create your app, from basic client side HTML all the way up to using a build system and compilers.

In all cases, you should have familiarity with using Vue. A good resource for Vue tutorials is Laracasts.

Basic example

Get started quickly without the need for a build system, by using standard <script> and <link> tags to load the required javascript and CSS in your page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <title>My first Bootstrap-Vue app</title>

    <!-- Required Stylesheets -->
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

    <!-- Required scripts -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
  </head>

  <body>
    <!-- Our application root element -->
    <div id="app">
      <b-container>
        <b-jumbotron header="Bootstrap Vue"
                     lead="Bootstrap 4 Components for Vue.js 2"
        >
          <p>For more information visit our website</p>
          <b-btn variant="primary" href="https://bootstrap-vue.js.org/">More Info</b-btn>
        </b-jumbotron>

        <b-form-group horizontal
                      :label-cols="4"
                      description="Let us know your name."
                      label="Enter your name"
        >
           <b-form-input v-model.trim="name"></b-form-input>
        </b-form-group>

        <b-alert variant="success" :show="showAlert">
          Hello {{ name }}
        </b-alert>
      </b-container>
    </div>

    <!-- Start running your app -->
    <script>
      window.app = new Vue({
        el: "#app",
        data: {
          name: ''
        },
        computed: {
          showAlert() {
            return this.name.length > 4 ? true : false;
          }
        }
      })
    </script>

  </body>
</html>

Vue-CLI

webpack-simple example

Starter template: https://github.com/bootstrap-vue/webpack-simple

Note: you may need to adjust the template package.json file to use the latest Bootstrap-Vue version

Coming soon!

webpack example

Starter template: https://github.com/bootstrap-vue/webpack

Note: you may need to adjust the template package.json file to use the latest Bootstrap-Vue version

Coming soon!

Building with customized Bootstrap V4 CSS

If you are using a build system, and would like to customize the Bootstrap V4 CSS, the following references will be handy starting points:

Individual component import

There are a few methods that you can use to import individual components and directvies.

You will need vue-loader configured to handle the compiling any components that are internally single file .vue components.

The Bootstrap-Vue distribution now includes ES modules for all components and directives. These are located in the bootstrap-vue/es/components/ and bootstrap-vue/es/directives/ directories, when using the NPM bundle. When building from the Bootstrap-Vue repo source the directories will be created when you run yarn build.

Importing individual components and directives as ES modules

Components and directives appear in sub directories, grouped by functionality. As an example, you can import <b-card> (plus it's sub components) and <b-table> as follows:

// Import the individual components
import bCard from 'bootstrap-vue/es/components/card/card';
import bCardHeader from 'bootstrap-vue/es/components/card/card-header';
import bCardBody from 'bootstrap-vue/es/components/card/card-body';
import bCardFooter from 'bootstrap-vue/es/components/card/card-footer';
import bCardImage from 'bootstrap-vue/es/components/card/card-footer';
import bTable from 'bootstrap-vue/es/components/table/table';

// Add components globally:
Vue.component('b-card', bCard);
Vue.component('b-card-header', bCardHeader);
Vue.component('b-card-body', bCardBody);
Vue.component('b-card-footer', bCardFooter);
Vue.component('b-card-img', bCardImg);
Vue.component('b-table', bTable);

// Or make available to your compoent or app:
export default {
  components: {
    bCard,
    bCardHeader,
    bCardBody,
    bCardFooter,
    bCardImg,
    bTable
  },
  // ...
}

Importing component groups and directives as Vue plugins

A compoent group, and/or directive, can be imported as a Vue plugin, by importing the component group or directive directory. Impoting <b-card> (and its related sub-components) and <b-table> can simply be done as:

// Import the components as Vue plugins
import { Card, Table } from 'bootstrap-vue/es/components';

// Add the plugins to Vue
Vue.use(Card);
Vue.use(Table);

Now you can use the <b-card> (including the <b-card-*> sub-components) and <b-table> components in your project templates.

Note some component plugins automatically import other directives and components (i.e. the modal plugin also imports the v-b-modal directive, and nav plugin automatically imports all nav-* sub compoents and the dropdown sub components). Refer to the component reference or directive reference at the bottom of each documenttion page for details.