Unable to use Bootstrap library in Angular

Question

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

Possible duplicate of How to use Bootstrap css Library in Angular 2 project? — Makoto
– Makoto, Commented Jul 24, 2018 at 15:16
I put the image as included in the question, not just a link. — Nic3500
– Nic3500, Commented Jul 24, 2018 at 15:22

DeborahK · Accepted Answer · 2018-07-24 21:52:11Z

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
}

answered Jul 24, 2018 at 21:52

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Adravi · Accepted Answer · 2018-07-24 15:14:45Z

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?

answered Jul 24, 2018 at 15:14

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

Collectives™ on Stack Overflow

Unable to use Bootstrap library in Angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related