Bootstrap 4 components for Vue.js 2

✨ We are heavily working for stable 1.0.0 release and Bootstrap v4-beta support. For earlier access please refer to 1.x branch and Beta Docs

Links

• 📘 Documentation
• 🔥 Documentation (Beta)
• 🔨 Release Notes
• 💬 Slack Community

Quick Start

Please refer to Official Documentation for setup guide, examples and documentation.

1. Download dependencies:

yarn add bootstrap-vue
yarn add bootstrap@4.0.0-alpha.6
yarn add -D style-loader

2. Register BootstrapVue in your app entrypoint:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

3. Import styles using style-loader:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

For users of Webpack or Webpack-Simple from vue-cli follow these instructions:

1. Download the dependencies:

yarn add bootstrap-vue
yarn add bootstrap@4.0.0-alpha.6
yarn add -D style-loader

2. In src/main.js, add the following lines, in priority order:

import Vue from 'vue'
/* ( there may be other imports here ) */
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap/dist/css/bootstrap.css'
/* ( there may be other imports here ) */

Vue.use(BootstrapVue)

Note on style-loader:

If you are unable or do not want to add style-loader as a developer dependency, you have to manually include both Bootstrap's and BootstrapVue's CSS files in your bundle or reference them from static/ via index.html.

License

MIT