How to use bootstrap in vue?

Yes, Bootstrap can still be used with Vue.js. There are several ways to use Bootstrap in a Vue project.

CDN: Add a link to Bootstrap's CDN in your public/index.htmlfile . This is the easiest way, you don't need to install any additional dependencies, but you can't use module-based Bootstrap components.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
  <!-- Add Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <!-- Add jQuery and Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

NPM: You can install bootstrap via npm and import it in your project. This approach allows you to import only the parts you need, rather than the entire Bootstrap library.

First, install Bootstrap by running the following command in your project directory:

npm install bootstrap

Then, add the following lines to your main.jsfile to import Bootstrap CSS and JS:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

Vue Bootstrap: There is also a library called BootstrapVue that converts every component of Bootstrap into a Vue component. This allows you to use Bootstrap more naturally in your Vue projects. First, you need to install it:

npm install bootstrap-vue

Then, add the following lines to your main.jsfile to import BootstrapVue and Bootstrap CSS:

import {
    
     BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Now you can use BootstrapVue components in your Vue components.

The above are several ways to use Bootstrap in Vue.js projects, and you can choose the most suitable one according to your needs.

How to use bootstrap in vue?

Guess you like