Install Bootstrap Css With Angular React Vue Svelte

Install Bootstrap CSS with Angular React, Vue, Svelte

React

Create your project

  npm create vite@latest
  cd my-project

npm Install Bootstrap

  npm install react-bootstrap bootstrap

yarn Install Bootstrap

  yarn install react-bootstrap bootstrap

main.tsx

import 'bootstrap/dist/css/bootstrap.min.css';

Test

<div className="alert alert-warning" role="alert">
    A simple dark alert—check it out!
</div>

---

Vue

Create your project

  npm create vite@latest
  cd my-project

npm Install Bootstrap

  npm install vue bootstrap bootstrap-vue

yarn Install Bootstrap

  yarn add vue bootstrap bootstrap-vue

import to main.js

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

Test

<div className="alert alert-warning" role="alert">
    A simple dark alert—check it out!
</div>

---

Svelte

Create your project

  npm create vite@latest
  cd my-project

npm Install Bootstrap

  npm install bootstrap

yarn Install Bootstrap

  yarn install bootstrap

main.ts

  import 'bootstrap/dist/css/bootstrap.min.css';

Test

  <div class="alert alert-warning" role="alert">
      A simple dark alert—check it out!
  </div>

---

Angular

Icon Bootstrap

npm install bootstrap bootstrap-icons

import in angular.json

"styles": [
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
],

ng add @ng-bootstrap/ng-bootstrap

angular.json

css

"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
"node_modules/bootstrap/css/bootstrap.css",
"src/styles.css",

scss

"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
"node_modules/bootstrap/scss/bootstrap.scss",
"src/styles.scss"

sass

"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
"node_modules/bootstrap/sass/bootstrap.sass",
"src/styles.sass"

Test

<div class="alert alert-warning" role="alert">
    A simple dark alert—check it out!
</div>

---