0

Header Code

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

angular.json code 

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

I am unable to see the bootstrap css in output window

enter image description here

kboul
  • 13,836
  • 5
  • 42
  • 53
Prab
  • 11
  • 1
    Possible duplicate of [How to use Bootstrap css Library in Angular 2 project?](https://stackoverflow.com/questions/36292438/how-to-use-bootstrap-css-library-in-angular-2-project) – Makoto Jul 24 '18 at 15:16
  • I put the image as included in the question, not just a link. – Nic3500 Jul 24 '18 at 15:22

2 Answers2

1

Alternatively, if you don't want to update the angular.json file, you can instead update the styles.css file as follows:

/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";

div.card-header {
 font-size: large;
}

div.card {
  margin-top: 10px
}

.table {
  margin-top: 10px
}
DeborahK
  • 57,520
  • 12
  • 104
  • 129
0

Change the code to:

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

It is already answered, see this

How to use Bootstrap css Library in Angular 2 project?

Ali Adravi
  • 21,707
  • 9
  • 87
  • 85