How to integrate Bootstrap 4 with Angular 10?

Here you go ,

First: npm install bootstrap --save

Then paste this inside angular.json file inside "styles"

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

That’s it. Run the app and you should see bootstrap 4 styles applied to the angular app

First install bootstrap e.g. via npm

npm install bootstrap --save

Then include the bootstrap css file within the styles section in the angular.json file.

If you need modals or other bootstrap components that provide some kind of interaction handling (modals, tabs etc.) also include the according Javascript files within the scripts section.

angular.json

{
  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.slim.js",
    "node_modules/popper.js/dist/umd/popper.js",
    "node_modules/bootstrap/js/dist/util.js",
    "node_modules/bootstrap/js/dist/alert.js",
    "node_modules/bootstrap/js/dist/button.js",
    "node_modules/bootstrap/js/dist/carousel.js",
    "node_modules/bootstrap/js/dist/collapse.js",
    "node_modules/bootstrap/js/dist/dropdown.js",
    "node_modules/bootstrap/js/dist/modal.js",
    "node_modules/bootstrap/js/dist/scrollspy.js",
    "node_modules/bootstrap/js/dist/tab.js",
    "node_modules/bootstrap/js/dist/tooltip.js",
    "node_modules/bootstrap/js/dist/popover.js"
  ]
}

Finally when you run an ng build --prod all the scripts and styles are created and minified in the dist folder.

dist folder

You can easily import bootstrap inside your main styles after installing bootstrap into your project.

npm install bootstrap --save

Then import bootstrap into your styles.scss :

@import '../../node_modules/bootstrap/scss/bootstrap';

It's the best approach if you want to override bootstrap style or create a new theme.

Please use ng-bootstrap They provide nice bootstrap integration with angular. Also, there is full manual how to to to it properly.

NOTE: None of the above manuals are valid and should not be used in a production environment.

Here is the demo page as well: https://ng-bootstrap.github.io/#/home