How to add bootstrap to a Vue app
In this post we will give you information about How to add bootstrap to a Vue app. Hear we will give you detail about How to add bootstrap to a Vue appAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to add a bootstrap CSS library to the vue app which is created using vue cli.
Adding bootstrap to Vue
Open, your terminal and navigate to the vue project folder
Run the following command in your terminal to install the bootstrap and its dependencies.
npm i bootstrap jquery popper.js
Open the vue project in your favorite code editor.
Navigate to the main.js file and the below imports.
import Vue from "vue";import App from "./App.vue";import "bootstrap/dist/css/bootstrap.min.css";import "bootstrap/dist/js/bootstrap.min.js";
Using the bootstrap
Now, we can use the bootstrap css classes inside our vue components like this.
<template> <div id="app"> <div role="alert"> A simple primary alert—check it out! </div> <div role="alert"> A simple secondary alert—check it out! </div> </div></template>
Hope this code and post will helped you for implement How to add bootstrap to a Vue app. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs