How to implement Bootstrap 4 in Angular CLI

Question

I’m having trouble using Bootstrap with the Angular CLI. I am using ng-bootstrap and I am following all the recommendations of the site, but without success, someone knows 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 am using:

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

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

Answer 1

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

Answer 2

Okay. The problem here is you forgot to add the css to your themese :D

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

// main.scss

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

and the bootstrap styles are in your style sheet

Answer 3

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"
        ],
    }
}