0

I'm following along with this tutorial: https://codeburst.io/getting-started-with-angular-7-and-bootstrap-4-styling-6011b206080

I have freshly generated a new angular project with the cli. included routing, scss stylesheets.

I have performed an npm install bootstrap jquery, and included them as follows:

angular.json

"projects": {
"myproject": {
  ...,
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...,
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ],
...

The bootstrap stylesheet is included in the styles.scss, so I can override variables if I want:

styles.scss

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

Then I added a navbar as follows:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <a class="navbar-brand">Angular Router</a>
    <ul class="nav navbar-nav" routerLinkActive="active">
        <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
        <li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
        <li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
    </ul>
</nav>

When serving the page it renders like this:

badly rendered navbar

The only reason the links are visible is because I selected them. Their font appears to be white. The navbar itself is not rendered as I would expect from bootstrap.

What am I missing? I see no errors in the console or developer tools.

EDIT: The question was marked as a duplicate of how to add bootstrap in angular 6. However, it is not, since I have followed the steps in that answer as you can see from the code I posted, and it still does not work.

EDIT 2: There are no warnings or errors in the console. It even shows that the styles are found, so I doubt that this is an installation/import problem.

enter image description here

Jeremy
  • 712
  • 1
  • 6
  • 24
  • Can you confirm that bootstrap is installed on `node_modules`, or just re run `npm install` – penleychan Mar 27 '19 at 14:05
  • Did you import Bootstrap’s javascript file which is essential to use some of Bootstrap’s component, such as the dropdown? – nircraft Mar 27 '19 at 14:06
  • @penleychan bootstrap exists in node_modules and I can see the files in chromes developer tools, so they must be loaded – Jeremy Mar 27 '19 at 14:07
  • @nircraft: I've added import bootstrap from "bootstrap"; to the app.component.ts file – Jeremy Mar 27 '19 at 14:08
  • Possible duplicate of [How to add bootstrap in angular 6 project?](https://stackoverflow.com/questions/50290197/how-to-add-bootstrap-in-angular-6-project) – nircraft Mar 27 '19 at 14:13

6 Answers6

2

The issue is not due to your configuration rather how your HTML is structured and missing CSS that is required for the navbar.

This is how your html for the navbar should look like:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
       <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
       <li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
       <li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
    </ul>
  </div>
</nav>

See stackblitz for example, make sure you make the screen big enough to show the content or https://angular-xbbtq9.stackblitz.io/ for full screen. (notice, working one is on the top, yours on the bottom)

penleychan
  • 5,370
  • 1
  • 17
  • 28
1

I had a similar issue and I ensured that bootstrap.min.css file was placed next to styles.css file in angular.json file and imported the bootstrap.css file in styles.css file. This fixed the issue.

@import "../node_modules/bootstrap/dist/css/bootstrap.css"; Add this line of code in styles.css file and this should fix your issue. However ensure that this code works for Bootstrap 3.4.1 version. I am using the same version and I am able to render Bootstrap classes.

Prashanth
  • 11
  • 2
0

You need to add Bootstrap's CSS to angular.json:

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
June
  • 592
  • 8
  • 18
0

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

nircraft
  • 8,242
  • 5
  • 30
  • 46
0

Re-install bootstrap via [https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap[1]

Install the dependencies :

npm install bootstrap --save npm install jquery --save npm install popper.js --save

Watch out about popper.js. This lib is used by Bootstrap. However, you have to precisely run npm install popper.js --save because popper is another js lib distributed by npm.

Integrate the dependencies to your project

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

Finally, open src\styles.css and add:

@import "~bootstrap/dist/css/bootstrap.css";

Check whether bootstrap plugin is available in package json file.

V5NEXT
  • 1,907
  • 4
  • 19
  • 38
0

If your using .Net Core and Angular 8+, you may have to add this

If you're having Bootstrap not 'sticking' across views you can add this to the top of styles.css in the root /src/ folder

@import "../node_modules/.staging/bootstrap-599b1c4f/dist/css/bootstrap.min.css";

This will make sure that Bootstrap is properly loaded for each component (I was having trouble with the Bootstrap styling turning off when going back to other components from Add or SingleBook components, this solved it)

(the '-55b1c4f' designation is unique and will be different on your installation, so change accordingly)

Scott Hyslop
  • 21
  • 3