I am working on Angular application using bootstrap 4.
I need help related to scss adding in my angular application.
My question is:
i.e.
npm install bootstrap --save
And, open angular.json file and add bootstrap file path to the styles section. Like:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Is the above way is same for both the version of angular.
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
"styles.css", instead "styles.css".
app.module.ts, try importing bootstrap like this: import * as bootstrap from 'bootstrap';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"
],
Bootstrap not working properly in Angular 6 / 7 / 8
I tried most of the solution over web nothing work for me
Only below code work for me
No need to change in angular.json
Directly add below line into style.css file
@import "../node_modules/bootstrap/dist/css/bootstrap.css"
because in angular.json already we are providing reference of style.css
Remember, if ng serve is working, stop the server for the changes in the angular.json file to take effect.
You can put this path in angular.json file in style tag ex:-`enter code "styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css "}
