CODEWITHSUNDEEP
angularbootstrap-4
Prab
Prab

Reputation: 11

Unable to use Bootstrap library in Angular

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

Upvotes: 0

Views: 503

Answers (2)

DeborahK
DeborahK

Reputation: 60518

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
}

Upvotes: 1

Ali Adravi
Ali Adravi

Reputation: 22723

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?

Upvotes: 0

Related Questions