How to implement Bootstrap 4 in Angular CLI

I am not able to use Bootstrap with 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?

Installation via npm:

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

Importing into the main module, with the .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 {}
Author: LeAndrade, 2018-04-06

3 answers

You need to add the Bootstrap in your project:

npm install bootstrap@4 --save

Then edit the file .angular-cli.json :

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

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

 1
Author: NoobSaibot, 2018-04-11 12:02:06

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

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

// main.scss

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

And bootstrap styles are now on your style sheet

 0
Author: MoshMage, 2018-04-10 13:20:11

Use the command npm install bootstrap --save, and add the line:

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

As in the example below:

"build": { 
    "options": {
        "styles": [
            "../node_modules/bootstrap/dist/css/bootstrap.min.css",(adicionar essa inha no angular.json)
            "styles.css"
        ],
    }
}
 0
Author: Izaias Dantas, 2019-05-15 17:13:02