CODEWITHSUNDEEP
angularnpmbootstrap-4angular-cliangular7
TAB
TAB

Reputation: 2134

Add Bootstrap 4 to Angular 6 or Angular 7 application

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.

Upvotes: 16

Views: 49942

Answers (5)

Frank
Frank

Reputation: 442

Remember, if ng serve is working, stop the server for the changes in the angular.json file to take effect.

Upvotes: 1

Rahul
Rahul

Reputation: 1

You can put this path in angular.json file in style tag ex:-`enter code "styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css "}

Upvotes: 0

Sameer Bahad
Sameer Bahad

Reputation: 583

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

Upvotes: 7

Unibit Solutions
Unibit Solutions

Reputation: 99

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

Upvotes: 9

Carol Skelly
Carol Skelly

Reputation: 362580

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

Upvotes: 29

Related Questions