CODEWITHSUNDEEP
bootstrap-4upgradeangular6
user6791921
user6791921

Reputation:

How to properly upgrade from bootstrap 3.3.7 to 4.0 on an Angular 6 project

I am developing my first Angular 6 project and, first, I installed Bootstrap 3.3.7 (via npm)

Now I have seen here some carousels and things that I would like to implement on my project but BS 4.0 is needed.

How should I do the upgrade in a safe way? I tried myself but I must have broken something because project stopped compiling. I restored the backup and I would like to do it right now.

Thanks

Upvotes: 1

Views: 21196

Answers (2)

Carlo
Carlo

Reputation: 210

If you you want to get the Latest Version from Bootstrap just run

npm install bootstrap@latest

run

npm install bootstrap@next

to get the latest beta...

Upvotes: 4

Kalpesh Shingala
Kalpesh Shingala

Reputation: 376

Following steps can help you.

  1. Find a file in your project root directory named package.json.
  2. In that file go to dependencies object. Find "bootstrap":"^3.3.7".
  3. Modify that entry to "bootstrap":"^4.0.0".
  4. Run npm install in your project root directory.

The above steps successfully install bootstrap-4 in your node_modules.

To use bootstrap .js and .css files you have to import them in your angular.json file.

To do that go to styles array in your angular.json file and import bootstrap .css files as below:

"styles":[
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
]

To import bootstrap .js files go to scripts array in your angular.json and import as below:

"scripts":[
   "./node_modules/bootstrap/dist/js/bootstrap.min.js",
]

Now compile your code with ng build or ng serve. It will work smoothly. Let me know if it throws any error.

Upvotes: 6

Related Questions