Setup Bootstrap in Angular Project

Here follow instructions on how to setup Bootstrap in your Angular project.

The instructions below can be found in my Angular Gist.


The instructions here are based on this post…
https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a

The method here is using Bootstrap 4 (beta.2) with ng-bootstrap package.

Install ng-bootstrap

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

Install bootstrap 4

1
npm install --save bootstrap@4.0.0-beta-2

Add files to angular-cli.json

1
2
3
4
5
6
7
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Import NgbModule
Import NgbModule in app.component

1
2
3
4
5
6
7
8
9
10
11
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

...

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

(Optionally) Import in other modules
If you need to import in other modules, import without the .forRoot() method:

1
2
3
4
5
6
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgbModule, ...]
})
export class OtherModule {
}

Captain out