How to use bootstrap 4 in angular 2?

Question

I\'m building an angular 2 app written in typescript. It would use the bootstrap 4 framework in combination with some custom theming, is this possible?

The \"ng2-boo

Answer 1

In angular 6: First install bootstrap in project directory npm install bootstrap. If you look at the Angular.JSON file you will see that styles.css is already referenced so in styles.css just add @import "~bootstrap/dist/css/bootstrap.css";

Answer 2

Adding Bootstrap using Angular CLI:

step 1. npm i bootstrap@latest --save 
step 2. open angular.json and then add bootstrap:
 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.scss"
    ]
step 3. restart the server to see the changes
        ng serve 

Answer 3

ng add has been introduced with Angular 6. To install Bootstrap 4 (ng-bootstrap 2.0.0)

ng add @ng-bootstrap/schematics

Don't forget to restart your app with ng serve.

Answer 4

I would suggest:

• Simply including a link to the Bootstrap's CSS file in your index.html page
• Using ng-bootstrap - a dedicated set of Angular 2 directives for parts where dynamic behaviour is needed. This way you don't need to import / setup jQuery nor care about Bootstrap's JavaScript.

Answer 5

Angular v6 Onwards Bootstrap v4 and SCSS

This works fine with angular 7 scss enabled project

Run following commands for installing bootstrap, jQuery, and popper.js

npm install --save bootstrap jquery popper.js

jQuery, and popper.js are prerequisites for running bootstrap4 (refer https://getbootstrap.com for more information.)

Go to your angular.json file inside root folder. Edit

architect -> build -> options -> scripts

node as follows

 "scripts": [
              "./node_modules/jquery/dist/jquery.slim.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

This will enable javascript functions of bootstrap on your project.

Than go to src->styles.scss file and add following line

@import '~bootstrap/scss/bootstrap';