How to Use Bootstrap in Your Vue.js Apps
Vue.js is a popular front-end framework for building Single Page Apps. It provides structure and abstraction. We can also create a server-side rendering application using Vue.js, It's help for SEO ( Search Engine Optimization ). Bootstrap is a free and Open Source CSS Framework. With Bootstrap we can create a responsive and mobile-friendly web application and it's very easy to design a web application.
The Bootstrap-Vue project has done most of the heavy lifting of replacing jQuery with Vue by implementing Bootstrap features as Vue components.
In this blog, we learn about using bootstrap-vue with vue.js.
Let's create a new Vue CLI Project:
vue create vue-bootstrap-app
Now, change into your new project directory:
You can add the bootstrap-Vue plugin to your created project.
vue add bootstrap-vue
Now It's done bootstrapping your Vue application.
All Of the features of Bootstrap are available as globally registered components in Bootstrap-Vue. In Bootstrap-Vue, All components start with prefixed b-.
<template> <b-container> <p>Hello, Bootstrap-Vue</p> </b-container> </template>
Now, Serve App:
npm run serve
If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.