How to Use Bootstrap in Your Vue.js Apps

  Vue.js Published:  1 year ago
How to Use Bootstrap in Your Vue.js Apps - TechvBlogs

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
Note: You will need to install Vue CLI Library in your development environment.

 Now, change into your new project directory:

cd vue-bootstrap-app

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-.

Example: src/App.vue

<template>
  <b-container>
    <p>Hello, Bootstrap-Vue</p>
  </b-container>
</template>

Now, Serve App:

npm run serve

How to Use Bootstrap in Your Vue.js AppsIf you have any queries or doubts about this topic please feel free to contact us . We will try to reach you.

 

Comments (0)

No Comments Found.