Go to your Vue application folder and install bootstrap.
npm install bootstrap
Import Bootstrap’s CSS and JavaScript files in your main Vue component (e.g., App.vue):
<template>
<div>
</div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
</script>
<style scoped>
/* Optional: Add custom CSS overrides for Bootstrap styles here */
</style>
Once you’ve included Bootstrap, you can use its components directly in your Vue templates:
<template>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>My Vue App</h1>
</div>
</div>
</div>
</template>
And that is it. Happy coding.
This post has 1 like.