Bootstrap Not Working Properly in Angular 6

Bootstrap not working properly in Angular 6

You have to install both bootstrap and JQuery:

npm install bootstrap jquery --save

Then you will find these files in your node module folder:

node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js

Then you have to update your angular.json file:

In the architect, build section, or even test section if you want to see Bootstrap working as well when testing your application.

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

If you do not add the jquery.min.js script Bootstrap will not work.

Another requirement is popper.js if you need Bootstrap dropdown then you will need to install it and add the script file as well

npm install popper.js

Then add this script as well

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

Bootstrap dropdown require Popper.js (https://popper.js.org)

bootstrap not connect to the angular 6?

In angular 6 you have to do it as bellow:

npm install --save bootstrap

Then only in src/style.css file add:

@import 'bootstrap/dist/css/bootstrap.min.css';

In angular 6 you don't have to add script to angular.json file

Bootstrap not working in Angular 6 app

in your style.scss files use import

@import "node_modules/bootstrap/scss/bootstrap.scss"

and remove "node_modules/bootstrap/scss/bootstrap.scss" from angular.json file

Bootstrap styles not loading in angular 10

When using bootstrap in angular there are several ways of adding it in. The most effective approach for me is to run ng add @ng-bootstrap/ng-bootstrap in the root of your project which will add required data in your angular.json and your package.json.

I should note that you have to have Angular Cli version greater than 9.

Bootstrap not being applied properly in angular

npm i bootstrap will install you the latest version of Bootstrap which is 5. Bootstrap 5 does not include thead-dark class and that is why your header isn't rendering dark.

Since you are using Bootstrap 5 you should be using table-dark class instead of thead-dark.

See documentation at: Bootstrap 5 Tables (thead)

<table class="table">
  <thead class="table-dark"> <!-- change this -->
    <!-- -->
  </thead>
  <tbody>
    <!-- -->
  </tbody>
</table>

And if you need Bootstrap 4, check out this blog tutorial for an installation guide Angular 10 with Bootstrap 4

Bootstrap features not working properly in Angular

I updated my bootstrap version to 5.1.3 and it worked!

---

Related Topics