How to use Bootstrap with Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using Bootstrap with Vue provides a robust foundation for responsive web applications with pre-built components, grid system, and utility classes for rapid development. As the creator of CoreUI, a widely used open-source UI library, I’ve extensively used Bootstrap with Vue across enterprise applications, leveraging its mature ecosystem for seamless integration. From my expertise, the most effective approach is to install Bootstrap CSS and optionally use BootstrapVue for Vue-specific components. This method provides access to Bootstrap’s complete styling system while maintaining Vue’s reactive data binding and component architecture.
Install Bootstrap CSS and optionally BootstrapVue for Vue-optimized components and seamless integration.
# Install Bootstrap CSS
npm install bootstrap
# Optional: Install BootstrapVue for Vue 3
npm install bootstrap-vue-next
// main.js - Bootstrap CSS approach
import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
createApp(App).mount('#app')
<template>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">{{ appName }}</a>
</nav>
<div class="row mt-4">
<div class="col-md-6">
<h1 class="display-4">{{ title }}</h1>
<p class="lead">{{ subtitle }}</p>
<button class="btn btn-primary" @click="handleClick">
Get Started
</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const appName = ref('Vue Bootstrap App')
const title = ref('Build Amazing Apps')
const subtitle = ref('Responsive design with Bootstrap and Vue')
const handleClick = () => {
console.log('Button clicked')
}
</script>
Bootstrap with Vue provides responsive design, utility classes, and component structure through CSS classes. Use Bootstrap’s grid system (container, row, col) for layouts, utility classes for spacing and colors, and form classes for validation states. For Vue-specific implementations, BootstrapVue offers Vue components with reactive props and events. JavaScript components can be controlled through Vue’s reactive data.
Best Practice Note:
This is the same approach we use for integrating Bootstrap with Vue in CoreUI enterprise applications and component libraries.
