Angular 4: How to include Bootstrap?

Question

I'm a backend developer and I'm just playing around with Angular4. So I did this installation tutorial: https://www.youtube.com/watch?v=cdlbFEsAGXo.

Given this, how can I add bootstrap to the app so I could use the class "container-fluid" or "col-md-6" and stuff like that?

See: http://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project — Dmitrij Kuba, Apr 22 '17 at 09:16
See: http://coderjony.com/blogs/how-to-add-bootstrap-in-an-angular-application/ — Ankush Jain, Apr 20 '19 at 20:54

score 199 · Answer 1 · edited Feb 26 '19 at 14:39

199

npm install --save bootstrap

afterwards, inside angular-cli.json (inside the project's root folder), find styles and add the bootstrap css file like this:

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
],

UPDATE:
in angular 6+ angular-cli.json was changed to angular.json.

edited Feb 26 '19 at 14:39

Tushar Walzade

3,737
4
33
56

answered Apr 22 '17 at 09:11

Egor Stambakio

17,836
5
33
35

2

That's also working but I guess http://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project is the one which I'd need to go with. Thank you for your answer! – Joschi Apr 22 '17 at 09:48
4

How to add bootstarp js and jquery js? – Ravi Ji May 08 '17 at 09:50
6

To put the js you must go to angular-cli.json and put "scripts": ["../node_modules/bootstrap/dist/js/bootstrap.min.js"], and you have the js – D4IVT3 Sep 01 '17 at 15:22
2

Could you explain me why `../node_modules [...]`? For me it should be just `/node_modules [...]`. – vinibrsl Sep 24 '17 at 12:11
2

@vnbrs this is a path relative to index.html. If you create app using angular cli your index.html sits in `./src` relative to app's root. If your setup is different you can adjust the path accrodingly. – Egor Stambakio Sep 24 '17 at 19:15
1

@Sevron sure, this installs whatever is the latest here https://www.npmjs.com/package/bootstrap, but you can install any css package in the same fashion - just specify the correct module name. – Egor Stambakio Oct 24 '17 at 19:23
1

I had to change this to `../node_modules/bootstrap/dist/css/bootstrap.css` (i.e. without the `.min`). – Duncan Jones Feb 14 '18 at 06:56
1

you need to put bootstrap, poperjs, jquery to scripts for full usability https://stackoverflow.com/a/54706908/3209523 – canbax May 16 '19 at 10:49

MDF · Answer 2 · 2019-02-24T07:49:44.557

Watch Video or Follow the step

Install bootstrap 4 in angular 2 / angular 4 / angular 5 / angular 6

There is three way to include bootstrap in your project
1) Add CDN Link in index.html file
2) Install bootstrap using npm and set path in angular.json Recommended
3) Install bootstrap using npm and set path in index.html file

I recommended you following 2 methods that are installed bootstrap using npm because its installed in your project directory and you can easily access it

Method 1

Add Bootstrap, Jquery and popper.js CDN path to you angular project index.html file

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

Method 2

1) Install bootstrap using npm

npm install bootstrap --save

after the installation of Bootstrap 4, we Need two More javascript Package that is Jquery and Popper.js without these two package bootstrap is not complete because Bootstrap 4 is using Jquery and popper.js package so we have to install as well

2) Install JQUERY

npm install jquery --save

3) Install Popper.js

npm install popper.js --save

Now Bootstrap is Install on you Project Directory inside node_modules Folder

open angular.json this file are available on you angular directory open that file and add the path of bootstrap, jquery, and popper.js files inside styles[] and scripts[] path see the below example

"styles": [   
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.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"
  ],

Note: Don't change a sequence of js file it should be like this

Method 3

Install bootstrap using npm follow Method 2 in method 3 we just set path inside index.html file instead of angular.json file

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Now Bootstrap Working fine Now

Angular6: the file .angular-cli.json is called angular.json now. And the path isn't "../node_modules..." anymore, instead it's: "node_modules/..." Cheers — , May 22 '18 at 13:10
I completely forgot to add the scripts in the angular.json and was wondering why the jquery components weren't doing their things. Thanks for reminding me! — AdminAffe, Aug 16 '18 at 09:37
What does adding bootstrap to scripts in angular.json do? Do you still have to do include it via " — Jens Mander, May 21 '19 at 23:11
Thank you,it is unbelievable how many sources out there lack this information,especially the bit about popper — Avi E. Koenig, Dec 12 '19 at 11:21

Vishal Biradar · Answer 3 · 2019-08-22T06:51:36.487

46

In order to configure/integrate/use Bootstrap in angular, first we need to install Bootstrap package using npm.

Install package

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Note: --save command will save the dependency in our angular app inside package.json file.

Now that we have the package installed with above step, now we can tell Angular CLI that it needs to load these styles by using any of the below options or both:

option 1) Adding into the file src/styles.css

we can add the dependencies as shown below:

@import "~bootstrap/dist/css/bootstrap.min.css";

Option 2) Adding into angular-cli.json or angular.json

We can add the style css files into angular-cli.json or angular.json file which is at root folder of our angular app as shown below:

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
]

edited Aug 22 '19 at 06:51

answered Jul 07 '17 at 13:49

Vishal Biradar

1,219
2
12
24

1

I wanted to post answer like this, but since its already here i'll just up-vote it. Well done sir. I would just add that in latest version of angular 7 there is no angular-cli.json but instead angular.json. – Игор Mar 07 '19 at 14:28
In option 2, the css path that worked for me was "./node_modules/bootstrap/dist/css/bootstrap.min.css", – Murtuza Oct 28 '19 at 06:23
@ИгорРајачић at what level should I add it into json file, can you please give an example link? – Kuldeep Yadav Dec 25 '19 at 14:43
1

@KuldeepYadav angular-cli.json or angular.json file which is at the root folder of our angular app – Vishal Biradar Dec 26 '19 at 07:55

score 12 · Answer 4 · answered Oct 12 '17 at 20:39

Angular 4 - Bootstrap / @ng-bootstrap setup

First install bootstrap into your project using below command:

npm install --save bootstrap

Then add this line "../node_modules/bootstrap/dist/css/bootstrap.min.css" to angular-cli.json file (root folder) in styles

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
],

After installing the above dependencies, install ng-bootstrap via:

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

Once installed you need to import main module.

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

After this, you can use All the Bootstrap widgets (ex. carousel, modal, popovers, tooltips, tabs etc.) and several additional goodies ( datepicker, rating, timepicker, typeahead).

score 10 · Answer 5 · answered Apr 22 '17 at 09:22

10

In Angular4 as you deal with @types system, you should do following things,

Do,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

look for types array and add jquery and bootstrap entries,

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

in head section add following entries,

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

And start using jquery and bootstrap both.

answered Apr 22 '17 at 09:22

micronyks

54,797
15
112
146

After taking build in production the links are throwing error in browser console – Vignesh Nov 14 '17 at 07:46
@Vignesh need to see the problem. its hard to say anything. – micronyks Nov 14 '17 at 14:55
1

It's probably because the files in your node_modules folder are not automatically served to the clients. Instead, add the styles and scripts to the `.angular-cli.json` file, which tells Angular to bundle them with the rest and serve them to the clients. – Noxxys Jan 14 '18 at 20:39

score 7 · Answer 6 · answered Apr 26 '18 at 13:00

For below detail steps and working example, you can visit https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

Very details steps with proper explanation.

Steps: Installing Bootstrap from NPM

Next, we need to install Bootstrap. Change the directory to the project we created (cd angular-bootstrap-example) and execute the following command:

For Bootstrap 3:

npm install bootstrap --save

For Bootstrap 4 (currently in beta):

npm install bootstrap@next --save

OR Alternative: Local Bootstrap CSS As an alternative, you can also download the Bootstrap CSS and add it locally to your project. I donwloaded Bootstrap from the website and created a folder styles (same level as styles.css):

Note: Don’t place your local CSS files under assets folder. When we do the production build with Angular CLI, the CSS files declared in the .angular-cli.json will be minified and all styles will be bundled into a single styles.css. The assets folder is copied to the dist folder during the build process (the CSS code will be duplicated). Only place your local CSS files under assets in case you are importing them directly in the index.html.

Importing the CSS 1.We have two options to import the CSS from Bootstrap that was installed from NPM:

strong text1: Configure .angular-cli.json:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
]

2: Import directly in src/style.css or src/style.scss:

@import '~bootstrap/dist/css/bootstrap.min.css';

I personally prefer to import all my styles in src/style.css since it’s been declared in .angular-cli.json already.

3.1 Alternative: Local Bootstrap CSS If you added the Bootstrap CSS file locally, just import it in .angular-cli.json

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

or src/style.css

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4: Bootstrap JavaScript Components with ngx-bootstrap (Option 1) In case you don’t need to use Bootstrap JavaScript components (that require JQuery), this is all the setup you need. But if you need to use modals, accordion, datepicker, tooltips or any other component, how can we use these components without installing jQuery?

There is an Angular wrapper library for Bootstrap called ngx-bootstrap that we can also install from NPM:

npm install ngx-bootstrap --save

Noteng2-bootstrap and ngx-bootstrap are the same package. ng2-bootstrap was renamed to ngx-bootstrap after #itsJustAngular.

In case you want to install Bootstrap and ngx-bootstrap at the same time when you create your Angular CLI project:

npm install bootstrap ngx-bootstrap --save

4.1: Adding the required Bootstrap modules in app.module.ts

Go through the ngx-bootstrap and add the modules needed in your app.module.ts. For example, suppose we want to use the Dropdown, Tooltip and Modal components:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

Because we call the .forRoot() method for each module (due the ngx-bootstrap module providers), the functionalities will be available in all components and modules of your project (global scope).

As an alternative, if you would like to organize the ngx-bootstrap in a different module (just for organization purposes in case you need to import many bs modules and don’t want to clutter your app.module), you can create a module app-bootstrap.module.ts, import the Bootstrap modules (using forRoot()) and also declare them in the exports section (so they become available to other modules as well).

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

At last, don’t forget to import your bootstrap module in you app.module.ts.

import { AppBootstrapModule } from './app-bootstrap/app-bootstrap.module';

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap works with Bootstrap 3 and 4. And I also made some tests and most of the functionalities also work with Bootstrap 2.x (yes, I still have some legacy code to maintain).

Hope this help someone!

score 6 · Answer 7 · answered Dec 22 '17 at 04:21

6

If you are using Sass/Scss, then follow this,

Do npm install

npm install bootstrap --save

and add import statement to your sass/scss file,

@import '~bootstrap/dist/css/bootstrap.css'

answered Dec 22 '17 at 04:21

Mohammed Safeer

20,751
8
75
78

score 5 · Answer 8 · edited May 12 '19 at 15:37

Tested In Angular 7.0.0

Step 1 - Install the required dependencies

npm install bootstrap (if you want specific version please specify the version no.)

npm install popper.js (if you want specific version please specify the version no.)

npm install jquery

Versions I have tried:

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

Step 2 : Specify the libraries in below orderin angular.json. In latest angular , the config file name is angular.json not angular-cli.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "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"
            ]
          },

Budi Salah · Answer 9 · 2018-05-17T18:18:12.073

For bootstrap 4.0.0-alph.6

npm install bootstrap@4.0.0-alpha.6 jquery tether --save

Then after this is done run:

npm install

Now. Open .angular-cli.json file and import bootstrap, jquery, and tether:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

And now. You ready to go.

Rakesh Roy · Answer 10 · 2019-06-11T08:01:53.263

As i can see you already got lots of answer but you can try this method to .

Its best practice not to use jquery in angular, I prefer https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md method to install bootstrap without using bootstrap js component which depends on jquery.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Keep your code jquery free in angular

Jinesh · Answer 11 · 2017-06-24T10:28:02.460

Run the following command in your project i.e npm install bootstrap@4.0.0-alpha.5 --save

After installing the above dependency run the following npm command which will install the bootstrap module npm install --save @ng-bootstrap/ng-bootstrap

Check this out for the reference - https://github.com/ng-bootstrap/ng-bootstrap

Add the following import into app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; and add NgbModule to the imports

In your stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

score 1 · Answer 12 · answered Jan 04 '19 at 12:45

1

Step 1 : npm install bootstrap --save

Step : 2 : Paste below code in angular.json node_modules/bootstrap/dist/css/bootstrap.min.css

Step 3 : ng serve

answered Jan 04 '19 at 12:45

Abdullah

2,393
1
16
29

2

After adding bootstrap in project restart your server – Gangani Roshan Feb 19 '19 at 07:50

score 1 · Answer 13 · edited Oct 29 '20 at 09:30

Adding bootstrap current version 4 to angular:

1/ First you have to install those:

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2/ Then add the needed script files to scripts in angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],

3/Finally add the Bootstrap CSS to the styles array in angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],`

check this link

score 0 · Answer 14 · answered Sep 24 '17 at 16:00

add into angular-cli.json

   "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [ 
         "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

It will be work, i checked it.

score 0 · Answer 15 · answered Apr 19 '18 at 07:14

If you want to use bootstrap online and your application has access to the internet you can add

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

Into you'r main style.css file. and its the simplest way.

Reference : angular.io

Note. This solution loads bootstrap from unpkg website and it need to have internet access.

score 0 · Answer 16 · answered May 11 '18 at 19:16

0

Angular 6 CLI, just do:

ng add @ng-bootstrap/schematics

answered May 11 '18 at 19:16

Brian

1

score 0 · Answer 17 · answered Jun 02 '18 at 09:45

0

To install the latest use $ npm i --save bootstrap@next

answered Jun 02 '18 at 09:45

diayn geogiev

101
1
3

score 0 · Answer 18 · answered Jul 25 '18 at 07:39

0

first install bootstrap in your project using npm npm i bootstrap after that open ur style.css file in your project and add this line

@import "~bootstrap/dist/css/bootstrap.css";

and that's it bootstrap added in your project

answered Jul 25 '18 at 07:39

AAshish jha

952
8
6

score 0 · Answer 19 · answered Jan 17 '19 at 09:07

|*| Installing Bootstrap 4 for Angular 2, 4, 5, 6 + :

|+> Install Bootstrap with npm

npm install bootstrap --save

npm install popper.js --save

|+> Add styles and scripts to angular.json

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]

Hamfri · Answer 20 · 2020-10-08T20:21:04.360

0

If you are on Angular 6+ add the following lines of code to angular.json:

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
          ],

edited Oct 08 '20 at 20:21

answered May 15 '20 at 11:19

Hamfri

1,979
24
28

score -1 · Answer 21 · answered Sep 25 '17 at 07:58

you work with cdn for bootstrap and jquery or install bootstarp directly in app with:

npm install ngx-bootstrap --save

also use https://ng-bootstrap.github.io/#/home, but this is not approperiate

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a

Angular 4: How to include Bootstrap?

21 Answers21

Install package

option 1) Adding into the file src/styles.css

Option 2) Adding into angular-cli.json or angular.json

Angular 4 - Bootstrap / @ng-bootstrap setup

Linked

Related