BootstrapHow-ToBeginner · 4 min read

How to Use Bootstrap with Vue: Simple Integration Guide

To use Bootstrap with Vue, install Bootstrap via npm and import its CSS in your main entry file. Then, you can use Bootstrap classes directly in your Vue templates or add Bootstrap Vue components for more integration.

📐

Syntax

First, install Bootstrap using npm with npm install bootstrap. Then, import Bootstrap CSS in your main.js or main.ts file using import 'bootstrap/dist/css/bootstrap.min.css'. Use Bootstrap classes like btn btn-primary in your Vue template elements to style them.

bash and javascript

npm install bootstrap

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css'

createApp(App).mount('#app')

💻

Example

This example shows a simple Vue component using Bootstrap classes to style a button and a card layout.

vue

<template>
  <div class="container mt-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Welcome to Vue with Bootstrap</h5>
        <p class="card-text">This card uses Bootstrap styles inside a Vue component.</p>
        <button class="btn btn-primary" @click="clicked = !clicked">
          {{ clicked ? 'Clicked!' : 'Click Me' }}
        </button>
      </div>
    </div>
  </div>
</template>

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

Output

A styled card with a title, text, and a blue button that toggles text between 'Click Me' and 'Clicked!' when clicked.

⚠️

Common Pitfalls

Forgetting to import Bootstrap CSS will result in no styles applied.
Using Bootstrap JavaScript components (like modals) requires adding Bootstrap's JS or using a Vue-specific library.
Mixing Bootstrap's jQuery-based plugins directly with Vue can cause conflicts; prefer Vue Bootstrap libraries.

vue and javascript

<!-- Wrong: No Bootstrap CSS imported -->
<template>
  <button class="btn btn-primary">Button</button>
</template>

// Right: Import Bootstrap CSS in main.js
import 'bootstrap/dist/css/bootstrap.min.css'

📊

Quick Reference

Install Bootstrap: npm install bootstrap
Import CSS: import 'bootstrap/dist/css/bootstrap.min.css'
Use classes: Add Bootstrap classes in Vue templates
For JS components: Use Vue Bootstrap libraries like bootstrap-vue-3

✅

Key Takeaways

Install Bootstrap via npm and import its CSS in your Vue app entry file.

Use Bootstrap CSS classes directly in Vue templates for styling.

Avoid using Bootstrap's jQuery plugins directly; use Vue-specific Bootstrap libraries for JS components.

Remember to import Bootstrap CSS or styles won't apply.

For advanced Bootstrap components, consider libraries like bootstrap-vue-3.