CODEWITHSUNDEEP
angular
Ahmed
Ahmed

Reputation: 1026

How to integrate Bootstrap 4 with Angular 10?

How to properly integrate Bootstrap 4, including styles and jQuery dependency in an Angular 10 project generated with Angular 10 CLI?

Upvotes: 4

Views: 3844

Answers (4)

Mindaugas Jaraminas
Mindaugas Jaraminas

Reputation: 3447

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

Upvotes: 0

Nicolas Law-Dune
Nicolas Law-Dune

Reputation: 1703

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.

Upvotes: 1

Bernie
Bernie

Reputation: 5055

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 Example contents of the dist folder

Upvotes: 2

Thanveer Shah
Thanveer Shah

Reputation: 3333

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

Upvotes: 2

Related Questions