How to add Bootstrap4 to your Angular project using Angular CLI


Sometimes you do not want to depend on a CDN to deliver your web application dependencies. Locally storing your application dependencies ensures that required dependencies are always available whether or not the CDN is available.

Follow below steps to add bootstrap4 to your Angular project.

1. Open your console/terminal and navigate to the base of your project.

2. Install bootstrap

npm install bootstrap@4.0.0-beta.3 --save

Note: as at the time of this writing, bootstrap@4.0.0-beta.3 is the most current version.

3. Install JQuery

npm install jquery --save

4. Install tether.js

npm install tether.js --save

5. Edit your project’s “angular-cli.json” and add the packages js and css paths to the “scripts” and “styles” section as shown below:

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

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

6. Open “package.json”, go to the dependencies section and remove carets in front of the version numbers for above packages. This is to ensure the packages are not automatically upgraded the next time you run “npm install”. The packages should look like below:

 "dependencies": {
    ...
    "bootstrap": "4.0.0-beta.3",
    "jquery": "3.2.1",
     "tether": "1.4.3",
    ...
    },

If you followed all the above steps, Bootstrap is now installed in your project. You can test by adding a bootstap component to your project.

Review this article
Sending
User Review
0 (0 votes)


About Matthias 33 Articles
I am a Software Engineer from Houston, TX who love to write codes that brings great ideas to live. In my professional life, I have created software for different industries including Oil & Gas, Finance, Service Provider, Cloud Computing and Embedded Systems. When not writting codes, i enjoy travelling, good music and photography. You can reach me at me@matthiasomisore.com.

Be the first to comment

Leave a Reply

Your email address will not be published.


*