How to use Bootstrap with Vue.js? (Integration Guide)

Vue 2 projects should use BootstrapVue to achieve complete component integration. Vue 3 projects recommend Bootstrap 5 CSS/JS with Bootstrap Icons. When only styles are needed, only Bootstrap CSS can be introduced. Customization requirements can be achieved through Sass override variables.

Use Bootstrap with Vue.js by either importing Bootstrap CSS and JS directly or using BootstrapVue (for Vue 2) or Bootstrap Icons native Bootstrap 5 (for Vue 3). The approach depends on your Vue version and whether you need components or just styling.

For Vue 2: Use BootstrapVue

BootstrapVue provides Vue-optimized versions of Bootstrap components with full support for Vue's reactivity, slots, and directives.

• Install via npm: npm install bootstrap-vue bootstrap
• In your main.js, import and use it:

   import Vue from 'vue';
  import BootstrapVue from 'bootstrap-vue';
  import 'bootstrap/dist/css/bootstrap.css';
  import 'bootstrap-vue/dist/bootstrap-vue.css';
  <p>Vue.use(BootstrapVue);

• Then use components like <b-button> , <b-modal> , or <b-table> in your templates.

For Vue 3: Use Bootstrap 5 Bootstrap Icons

BootstrapVue doesn't officially support Vue 3. Instead, use vanilla Bootstrap 5 CSS/JS and add interactivity manually—or pair with lightweight libraries.

• Install Bootstrap and icons: npm install bootstrap @popperjs/core bootstrap-icons
• In main.js or main.ts, import CSS and initialize Popper (required for tooltips/dropdowns):

   import 'bootstrap/dist/css/bootstrap.min.css';
  import 'bootstrap-icons/font/bootstrap-icons.css';
  import * as bootstrap from 'bootstrap'; // optional, if using JS components

• Use standard Bootstrap classes ( btn btn-primary , card , etc.) in your Vue templates. For JS-powered components (eg, collapse, modal), initialize them with vanilla JS or use composition API helpers.

Styling Only? Skip the JS

If you only need responsive layouts and utility classes—no modals, dropdowns, or carousels—you can use Bootstrap's CSS alone.

• Import just bootstrap/dist/css/bootstrap.min.css
• Apply classes directly: <div class="container mt-4"></div>
• No build-step changes or JS initialization needed. Works out of the box with any Vue setup.

Customize Bootstrap with Sass (Optional)

Want to tweak colors, spacing, or disable unused components? Use Bootstrap's Sass source.

• Install Sass: npm install -D sass sass-loader
• Create a custom bootstrap.scss file, override variables before importing:

   $primary: #42b883;
  @import "~bootstrap/scss/functions";
  @import "~bootstrap/scss/variables";
  @import "~bootstrap/scss/mixins";
  @import "~bootstrap/scss/root";
  // ... then selectively import components

• Import your custom SCSS instead of the precompiled CSS.

Basically, pick BootstrapVue for full component integration in Vue 2 — or go lightweight with Bootstrap 5 CSS optional JS in Vue 3. No magic required, just match the tooling to your version and needs.

The above is the detailed content of How to use Bootstrap with Vue.js? (Integration Guide). For more information, please follow other related articles on the PHP Chinese website!