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.x.x CSS. This can either be done by adding a CDN <link> to your index.html. The following CDN is from the current Boostrap 4.x.x 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!