Add Bootstrap 4 to Angular 6 or Angular 7 application
You need to do the following:
Add Bootstrap to package.json
(which is done with npm install bootstrap --save)
Add Bootstrap to angular.json
(jQuery is required too)
"styles": [
"styles.css".
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Reference Bootstrap in the Angular app (app.module.ts)
import bootstrap from "bootstrap";
Demo: https://codesandbox.io/s/kmm2q7zvko
Article: https://medium.com/wdstack/angular-7-bootstrap-4-starter-25573dff23f6
OPTION-1
execute
npm install bootstrap@4 jquery --save
The JavaScript parts of Bootstrap are dependent on jQuery. So you need the jQuery JavaScript library file too.
"styles": [
"src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
OPTION-2
ng-bootstrap
It contains a set of native Angular directives based on Bootstrap’s
markup and CSS. As a result, it's not dependent on jQuery or Bootstrap’s JavaScript
npm install --save @ng-bootstrap/ng-bootstrap
After Installation import it in your root module and register it in @NgModule imports` array
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
ng-bootstrap
requires Bootstrap's 4 css to be added in your project. you need to
Install it explicitly via:
npm install bootstrap@4 --save
In your angular.json add the file paths to the styles array in under build target
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],