Bootstrap not working properly in Angular 6

I started learning Angular and I'm following a tutorial. I tried putting the code as in the tutorial for the navigation-bar:

<nav class="navbar navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <a href="#" class="navbar-brand">Recipe book</a>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
             <li> <a href="#">Recipe</a></li>
             <li> <a href="#">Shopping list</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <ul class="dropdown-menu">
                      <li><a href="#">Save data </a></li>
                      <li><a href="#">Fetch data </a></li>
                  </ul>
              </li>
         </ul>
     </div>
  </div>
</nav>

But all I get is this:

If I remove bootstrap, I do get the other items.

I used npm install bootstrap --save and @import "~bootstrap/dist/css/bootstrap.css"; in styles.css to use bootstrap.

EDIT:

I did not wanted to open a question with two problem, but after looking at the answers so far ill describe another problem I had:

I also installed Jquery using nmp install jquery --save and added to angular.json:

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

In this case, after removing @import "~bootstrap/dist/css/bootstrap.css"; from styles.css`, bootstrap is not working at all. The only way i got bootstrap to work is as i described in the question.

EDIT 2:

I started a new project and followed @HDJEMAI s answer instructions. I now still get the same page as in the picture but its now working through the rows added to styles and scripts in angular.json and not through the @import "~bootstrap/dist/css/bootstrap.css" in the styles.css file . But the problem is still that is not the same as in the tutorial even though the code is the same.

This is what he gets in the tutorial:

Solution 1:

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)

Solution 2:

If you are adding the bootstrap path into the angular.json file, make sure it is the styles within the project\architect\build. Not the one in the project\architect\test.

{
"projects": {
        "architect": {
            "build": {
                    "styles": [
                        "node_modules/bootstrap/dist/bootstrap.min.css",
                         "src/styles.css"
                    ],
            "test": {
                    "styles": [
                         "src/styles.css"
                    ],