CODEWITHSUNDEEP
angularng-bootstrap
netshark1000
netshark1000

Reputation: 7403

ng-bootstrap: Use scss in project

My angular project is using scss and before I switched to ng-bootstrap I followed this guideline to integrate bootstrap with scss in my angular project: https://shermandigital.com/blog/bootstrap-sass-with-angular-cli/

Now I switched to ng-bootstrap. Is there something similar?

Upvotes: 1

Views: 800

Answers (1)

Eliseo
Eliseo

Reputation: 57939

Net, in a angular project you write

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

In your main module.ts import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

OR in a module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})
export class OtherModule {
}

then, you can write in a component, e.g.

<button type="button" class="btn btn-outline-secondary" placement="top" ngbTooltip="Tooltip on top">
  Tooltip on top
</button>

If you have ALREADY import bootstrap.css.4.0 WHATEVER WAY(*), you can see the tooltip correct, if not you can see a tooltip, but not well formated.

(*) it would simply be worth to import the css in angular-cli.json add

"styles": [
        "styles.css",
        "../bootstrap.css"
      ],

Upvotes: 1

Related Questions