How to implement Bootstrap 4 in the Angular CLI

Navigation
0

I am not able to use Bootstrap with the Angular CLI. I'm using ng-bootstrap and I'm following all the recommendations of the site, but without success, does anyone know how to use it?

  

install via npm:

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

  

Importing into the main module, with .forRoot (): 

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

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

Importing into the module with the component I'm using: 

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

@NgModule({
   declarations: [OtherComponent, ...],
   imports: [NgbModule, ...]
})
export class MeuModule {}
    
asked by anonymous 06.04.2018 / 22:35

2 answers

0

You need to add Bootstrap in your project: 

npm install bootstrap@4 --save

Then edit the .angular-cli.json file: 

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

Source: ng-bootstrap's css folder does not exist

    
11.04.2018 / 14:02
0

Okay. The problem here is that you forget to add css to your themese: D

In your main.scss (or equivalent) you only have to import bootstrap scss: 

// main.scss

// 3rd party libraries
@import "~bootstrap/scss/bootstrap";

and bootstrap styles are now in your stylesheet

    
10.04.2018 / 15:20
Calculating mean while sequence Return Image Json Database