How to add bootstrap in vueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To add the bootstrap in vueJS.we are going to use the bootstrap, bootstrap-vue package in vuejs.

Today I am going to show you How to add Bootstrap in VueJS?

Table of contains

• Setup the Vue.js
• Install Bootstrap package
• Add the Bootstrap
• Using Bootstrap component

Let’s start today’s tutorial How do I to add Bootstrap in VueJS?

Setup the Vue.js

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, which will show you step by step process of installation.

How to Install the VueJS project?

Install Bootstrap package

To add the bootstarp in vuejs, we are going to use the Bootstrap and Bootstrap-vue packges.To install these packages in our vuejs project we can use the either npm or yarn.Let’s see what are the commands to install the bootstrap in yarn and npm:

Using the npm:

    npm install vue bootstrap bootstrap-vue

Using the yarn:

    yarn install vue bootstrap bootstrap-vue

Add the Bootstrap

After the installation done.Register Bootstrap in the app entry point that is app.js or main.js

main.js

import Vue from 'vue'
import App from './App.vue'

import { BootstrapVue } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  
}).$mount('#app')

Using Bootstrap component

Let’s check if the bootstrap is install successfully or not.To check that we are going to use the bootstrap components.let’s see the code:

FirstComponent.vue

<div>
  <b-alert show variant="success">Success</b-alert>
  <b-alert show variant="danger">Danger</b-alert>
  <b-alert show variant="warning">Warning</b-alert>
</div>

For now, let’s check the output.

All the best 👍.