ng-bootstrap style not importing

Question

Setting up an accordion from here but the style is not importing correctly. I expected to see gray boxes like this:

GOAL:

However my code looks like this:

---

app.module imports (using forRoot() because of this ):

 NgbModule.forRoot()

HTML:

 <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0"> <ngb-panel title="Simple"> <ng-template ngbPanelContent> Hi! </ng-template> </ngb-panel> <ngb-panel> <ng-template ngbPanelTitle> <span>&#9733; <b>Fancy</b> title &#9733;</span> </ng-template> <ng-template ngbPanelContent> lolzy </ng-template> </ngb-panel> </ngb-accordion>

Answer 1

The ng-bootstrap documentation indicates:

The only two dependencies are Angular and Bootstrap 4 CSS

You need to add a reference to Bootstrap 4.xx CSS. This can either be done by adding a CDN <link> to your index.html . The following CDN is from the current Boostrap 4.xx documentation :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Or, if you are using @angular/cli, you can add Global Styles to your angular.json styles array property with the relative path from angular.json to the node_modules/bootstrap/dist/css/bootstrap.min.css :

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

You can also use import statements to the node_modules bootstrap.min.css in the style.css file.

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Hopefully that helps!