Saturday, April 6, 2019

How to Install Bootstrap 3 and 4 in angular project

First, create an Angular app. Once the app is created successfully, install bootstrap 3 and 4 by using the following simple steps.

1. First install Bootstrap 3 and 4 in your angular project using following command

npm i --save bootstrap3
npm i --save bootstrap4

2. Then go to angular.json file and find the script and style part.

3. Just call the css and js file from the installed folder

4. The css file path is like "node_modules/bootstrap/dist/css/bootstrap.min.css",

5. And the js file path is like "node_modules/aos/dist/aos.js"

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

6. Now we came to the final step, just terminate the running project in Command Prompt using the shortcut ctrl+c twice.

7. Then serve the project again it'll work.

8. Use some bootstrap default classes and check the output once.

For Example -:)( <div class="container"> <h1>This is the bootstrap heading</h1> </div> )

No comments:

Post a Comment