ng-bootstrap's css folder does not exist

Question

I'm new to angular and trying to use bootstrap 4 in conjunction with angular. First i installed ng-bootstrap like follow:

npm install --save @ng-bootstrap/ng-bootstrap

And some other related stuff in app.module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
...
NgbModule.forRoot()

And add some style into .angular-cli.json (put following code into styles array)

"../node_modules/@bootstrap/dist/css/bootstrap.min.css"

Everything work as expected but style! I realize that dist sub-folder does not exist in '../node_modules/@bootstrap/' address.
I also tried to build the project using ng build, But it still doesn't exist. Note that "outDir": "dist" is checked in .angular-cli.json file.
Am i miss something?

Vikas · Accepted Answer · 2018-04-09 12:06:46Z

7

Ng-Bootstrap contains a set of native Angular directives based on Bootstrap’s markup and CSS. As a result, it's not dependent on jQuery or Bootstrap’s JavaScript
but it requires Bootstrap's 4 css to be added in your project. you need to Install it explicitly via:
npm install bootstrap@4 --save and add the file paths to the styles array in file .angular-cli.json:

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

edited Apr 9, 2018 at 12:06

answered Apr 9, 2018 at 9:11

Vikas

12.1k7 gold badges49 silver badges71 bronze badges

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

9 Comments

Rzassar Over a year ago

No, as this https://ng-bootstrap.github.io/#/getting-started link mentioned:"Should I add bootstrap.js or bootstrap.min.js to my project? No, the goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code. "

Vikas Over a year ago

My bad, but u still need bootstrap css to be added in your styles array,I have edited my ans

Rzassar Over a year ago

@Viskas Yes but I realize that dist sub-folder does not exist in '../node_modules/@bootstrap/' address.

Vikas Over a year ago

Check thoroughly after executing above stated command subfolder must exist in../node_modules/bootstrap/dist what's /@bootstrap/' address

Rzassar Over a year ago

@Viskas because i don't have bootstrap folder, but instead '@bootstrap' folder does exist. On the other hand, my guess is, bootstrap css should be installed separately (also it doesn't mentioned in documents).

|

Collectives™ on Stack Overflow

ng-bootstrap's css folder does not exist

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related