How to use Bootstrap with Vue.js?

Use Bootstrap 5 as it is jQuery-free and compatible with Vue; 2. Install Bootstrap via npm and import its CSS in your main file for styling; 3. Apply Bootstrap classes directly in Vue templates for layout and design; 4. Optionally use Bootstrap-Vue-3 for Vue 3 to access native Vue components like <b-modal> and ensure reactivity; 5. Manually initialize JavaScript components like tooltips using refs and lifecycle hooks to align with Vue’s reactivity; 6. Customize Bootstrap with Sass by overriding variables in a custom SCSS file for consistent theming. This approach ensures seamless integration of Bootstrap’s UI with Vue’s component system while maintaining reactivity and avoiding DOM conflicts.

Using Bootstrap with Vue.js lets you combine Vue’s reactive components with Bootstrap’s ready-to-use UI styles and layout system. Here's how to do it properly depending on your needs and setup.

✅ 1. Choose the Right Bootstrap Version

Bootstrap 5 is recommended (as of 2024) because it doesn’t depend on jQuery, which is incompatible with Vue. Avoid Bootstrap 4 if possible, since it relies on jQuery for JavaScript components.

✅ 2. Install Bootstrap via npm (Recommended for Vue Projects)

If you're using Vue CLI, Vite, or any modern build setup:

npm install bootstrap bootstrap-icons

Note: bootstrap-icons is optional if you want official icons.

Then, import Bootstrap CSS in your main JavaScript/TypeScript file (e.g., main.js or main.ts):

import 'bootstrap/dist/css/bootstrap.css'
// Optional: If you want to use Bootstrap’s JavaScript components (modals, dropdowns, etc.)
import 'bootstrap'

⚠️ Don’t use bootstrap.min.css unless you have a specific reason — the regular .css works fine with bundlers.

✅ 3. Use Bootstrap Classes in Your Vue Components

Now you can use Bootstrap classes directly in your Vue templates:

<template>
  <div class="container mt-4">
    <button class="btn btn-primary" @click="showModal = true">
      Open Modal
    </button>

    <!-- Bootstrap Modal (basic structure) -->
    <div v-if="showModal" class="modal fade show" style="display: block;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Hello from Bootstrap</h5>
            <button type="button" class="btn-close" @click="showModal = false"></button>
          </div>
          <div class="modal-body">
            <p>This is a modal powered by Vue and Bootstrap.</p>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" @click="showModal = false">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

? Tip: For modals, tooltips, and popovers, consider using Bootstrap-Vue or custom Vue wrappers, because managing show/hide via DOM manipulation breaks Vue’s reactivity.

✅ 4. (Optional) Use Bootstrap-Vue (For Vue 2) or Bootstrap-Vue-3 (For Vue 3)

If you want true Vue components (like <b-modal>, <b-button>, etc.), use a wrapper library.

For Vue 3:

Install Bootstrap-Vue-3:

npm install bootstrap-vue-3

Then in main.js:

import { createApp } from 'vue'
import App from './App.vue'
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

const app = createApp(App)
app.use(BootstrapVue3)
app.mount(App)

Now use components like:

<template>
  <b-container class="mt-4">
    <b-button variant="primary" @click="show = true">Open Modal</b-button>
    <b-modal v-model="show" title="Vue   Bootstrap">Hello!</b-modal>
  </b-container>
</template>

<script>
export default {
  data() {
    return { show: false }
  }
}
</script>

✅ This approach integrates Bootstrap components into Vue’s reactivity system.

✅ 5. Handling JavaScript Components (Popovers, Tooltips, Modals)

Bootstrap’s JS components rely on DOM manipulation. To use them safely in Vue:

• Initialize them after the element is rendered using $nextTick or ref.
• Destroy them when not needed.

Example with a tooltip:

<template>
  <button ref="tooltipBtn" class="btn btn-success" data-bs-toggle="tooltip" title="I'm a tooltip">
    Hover me
  </button>
</template>

<script>
import { ref, onMounted } from 'vue'
import { Tooltip } from 'bootstrap'

export default {
  setup() {
    const tooltipBtn = ref(null)

    onMounted(() => {
      if (tooltipBtn.value) {
        new Tooltip(tooltipBtn.value)
      }
    })

    return { tooltipBtn }
  }
}
</script>

✅ 6. Customize Bootstrap (Optional)

You can customize Bootstrap (colors, fonts, etc.) by importing Sass instead:

1. Install Sass:

npm install sass

2. Create a custom assets/scss/custom.scss:

// Override variables
$primary: #ff6b35;
$enable-rounded: false;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

3. Import this file in your app:

import './assets/scss/custom.scss'

Now your styles are themed!

Summary

Basically, just import the CSS, optionally the JS, and start using classes. For interactive components, either use wrapper libraries or manually initialize Bootstrap JS with Vue lifecycle hooks.

Not complicated — but easy to misuse if you mix DOM manipulation with Vue’s reactivity.

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