How to use Bootstrap in an Angular project?

Question

I am starting my first Angular application and my basic setup is done.

How can I add Bootstrap to my application?

If you can provide an example then it would be a great help.

score 120 · Accepted Answer · answered Apr 06 '17 at 11:36

Provided you use the Angular-CLI to generate new projects, there's another way to make bootstrap accessible in Angular 2/4.

Via command line interface navigate to the project folder. Then use npm to install bootstrap:
$ npm install --save bootstrap. The --save option will make bootstrap appear in the dependencies.
Edit the .angular-cli.json file, which configures your project. It's inside the project directory. Add a reference to the "styles" array. The reference has to be the relative path to the bootstrap file downloaded with npm. In my case it's: "../node_modules/bootstrap/dist/css/bootstrap.min.css",

My example .angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "bootstrap-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Now bootstrap should be part of your default settings.

I think bootstrap.min.js should be added to the "scripts" as well in this solution. Do you agree? — hamalaiv, Apr 23 '17 at 17:00
I got bootstrap installed using Step 1 and then inserting @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; in my src/styles.css file as described in the following post https://stackoverflow.com/a/40054193/3777549. Step 2 in this post was not necessary for me, I'm using @angular/cli: 1.3.1 — user3777549, Sep 11 '17 at 19:52

score 77 · Answer 2 · answered Mar 29 '16 at 18:47

An integration with Angular2 is also available through the ng2-bootstrap project : https://github.com/valor-software/ng2-bootstrap.

To install it simply put these files in your main HTML page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Then you can use it into your components this way:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [Alert],
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}

If using the ng2-bootstrap version the aren't you supposed to use the bundled css? I'm not sure why you'd use the CDN css or is that how it's supposed to be done? I'm new to this too. — Stephen York, Jan 09 '17 at 09:49

score 38 · Answer 3 · answered Mar 29 '16 at 18:43

38

All you need to do is include the boostrap css within your index.html file.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

answered Mar 29 '16 at 18:43

user2263572

5,435
5
35
57

1

Is there a way to include it from local resource instead of CDN? – SparK Sep 19 '16 at 01:53
1

Yes, href should just be set to the path of your local file. If you are having issues, I would suggest searching "serving static file" from whatever web server you are using. – user2263572 Sep 19 '16 at 20:40
It doesn't work on angular 6+, for files other than index.html. eg.`app.component.html`. please tell. – GD- Ganesh Deshmukh Jul 30 '18 at 11:34

score 21 · Answer 4 · answered Jul 23 '16 at 12:03

21

Another very good (better?) alternative is to use a set of widgets created by the angular-ui team: https://ng-bootstrap.github.io

answered Jul 23 '16 at 12:03

pkozlowski.opensource

117,202
60
326
286

occasl · Answer 5 · 2017-01-23T20:37:15.363

16

If you plan on using Bootstrap 4 which is required with the angular-ui team's ng-bootstrap that is mentioned in this thread, you'll want to use this instead (NOTE: you don't need to include the JS file):

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

You can also reference this locally after running npm install bootstrap@4.0.0-alpha.6 --save by pointing to the file in your styles.scss file, assuming you're using SASS:

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

edited Jan 23 '17 at 20:37

answered Jan 11 '17 at 18:43

occasl

5,303
5
56
81

1

Can you please explain why you don't need to include the JS file. It it because NPM installs it? Also, in Thierry Templier's example, he imports ng2-bootstrap/ng2-bootstrap to use an alert. Is usage the same there for bootstrap 4? – BBaysinger Jan 23 '17 at 19:22
Thanks. I did try your second example. I got an error that the resource failed to load from node_modules. – BBaysinger Jan 23 '17 at 19:52
1

See updated answer. If you're using SASS you can just do what I did and `@import` it into your SASS file. If not, you can try adding it to your `vendor.ts` file, but I'm not using that in my code. – occasl Jan 23 '17 at 20:39

score 10 · Answer 6 · answered Jan 05 '17 at 15:00

The most popular option is to use some third party library distributed as npm package like ng2-bootstrap project https://github.com/valor-software/ng2-bootstrap or Angular UI Bootstrap library.

I personally use ng2-bootstrap. There are many ways to configure it, because configuration depends on how your Angular project is build. Underneath I post example configuration based on Angular 2 QuickStart project https://github.com/angular/quickstart

Firstly we add dependencies in our package.json

    { ...
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",

    ...

    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "1.1.16-11"
  },
... }

Then we have to map names to proper URL's in systemjs.config.js

(function (global) {
  System.config({
    ...
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      //bootstrap
      'moment': 'npm:moment/bundles/moment.umd.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
...
  });
})(this);

We have to import bootstrap .css file in index.html. We can get it from /node_modules/bootstrap directory on our hard drive (because we added bootstrap 3.3.7 dependency) or from web. There we are obtaining it from web:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    ...
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

We should edit our app.module.ts file from /app directory

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';

import { AppComponent }  from './app.component';


@NgModule({
  //bootstrap alert import part 2
  imports:      [ BrowserModule, AlertModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

And finally our app.component.ts file from /app directory

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

Then we have to install our bootstrap and ng2-bootstrap dependencies before we run our app. We should go to our project directory and type

npm install

Finally we can start our app

npm start

There are many code samples on ng2-bootstrap project github showing how to import ng2-bootstrap to various Angular 2 project builds. There is even plnkr sample. There is also API documentation on Valor-software (authors of the library) website.

score 9 · Answer 7 · answered Jun 15 '17 at 17:58

In an angular-cli environment, the most straightforward way I've found is the following:

1. Solution in an environment with s̲c̲s̲s̲ stylesheets

npm install bootstrap-sass —save

In style.scss:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Note1: The ~ character is a reference to nodes_modules folder.
Note2: As we are using scss, we can customize all boostrap variables we want.

2. Solution in an environment with c̲s̲s̲ stylesheets

npm install bootstrap —save

In style.css:

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

score 6 · Answer 8 · answered Dec 19 '17 at 00:26

There are several ways to configure angular2 with Bootstrap, one of the most complete ways to get the most of it is to use ng-bootstrap, using this configuration we give to algular2 complete control over our DOM, avoiding the need to use JQuery and Boostrap.js.

1-Take as a starting point a new project created with Angular-CLI and using the command line, install ng-bootstrap:

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

Note: More info at https://ng-bootstrap.github.io/#/getting-started

2-Then we need to install bootstrap for the css and the grid system.

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

Note: More info at https://getbootstrap.com/docs/4.0/getting-started/download/

Now we have the setup the environment and for that we have to change the .angular-cli.json adding to the style:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Here is an example:

"apps": [
    {
      "root": "src",
        ...
      ],
      "index": "index.html",
       ...
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

The next step is to add the ng-boostrap module to our project, to do so we need to add on the app.module.ts:

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

Then add the new module to the application app: NgbModule.forRoot()

Example:

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Now we can start using bootstrap4 on our angular2/5 project.

score 3 · Answer 9 · answered Jul 27 '17 at 13:38

I had the same question and found this article with a really clean solution:

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/

Here are the instructions, but with my simplified solution:

Install Bootstrap 4 (instructions):

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

If needed, rename your src/styles.css to styles.scss and update .angular-cli.json to reflect the change:

"styles": [
  "styles.scss"
],

Then add this line to styles.scss:

@import '~bootstrap/scss/bootstrap';

score 3 · Answer 10 · edited Sep 14 '17 at 12:46

3

just check your package.json file and add dependencies for bootstrap

"dependencies": {

   "bootstrap": "^3.3.7",
}

then add below code on .angular-cli.json file

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

Finally you just update your npm locally by using terminal

$ npm update

edited Sep 14 '17 at 12:46

Derlin

9,572
2
32
53

answered Aug 31 '17 at 16:32

Tanjeeb Ahsan

87
1
7

veben · Answer 11 · 2018-09-13T06:27:40.107

Procedure with Angular 6+ & Bootstrap 4+ :

Open a shell on the folder of your project
Install bootstrap with the command : npm install --save bootstrap@4.1.3
Bootstrap need the dependency jquery, so if you don't have it, you can install it with the command : npm install --save jquery 1.9.1
You may need to fix vulnerability with the command : npm audit fix
In your main style.scss file, add the following line : @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

OR

Add this line to your main index.html file : <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

31113 · Answer 12 · 2017-09-16T13:33:34.443

2

npm install --save bootstrap
go to -> angular-cli.json file, find styles properties and just add next sting: "../node_modules/bootstrap/dist/css/bootstrap.min.css", It might be looks like this:
```
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
```

edited Sep 16 '17 at 13:33

answered Sep 16 '17 at 13:23

31113

399
4
18

score 1 · Answer 13 · answered May 25 '17 at 09:20

1

I was looking for same answer and finally I found this link. You can find explained three different ways how to add bootstrap css into your angular 2 project. It helped me.

Here is the link: http://codingthesmartway.com/using-bootstrap-with-angular/

answered May 25 '17 at 09:20

MiroslavStojakovic

167
1
8

score 1 · Answer 14 · answered Jan 23 '19 at 13:14

My recommendation would be instead of declaring it in the json stylus to put it in the scss so that everything is compiled and in one place.

1)install bootstrap with npm

 npm install bootstrap

2) Declare bootstrap npm in the css with our styles

Create _bootstrap-custom.scss:

  // Required
  @import "bootstrap-custom-required";


  // Optional
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/grid";
  @import "~bootstrap/scss/tables";

    ...
    ..
    .

3) Within the styles.scss we insert

@import "bootstrap-custom";

so we will have all our core compiled and in one place

score 0 · Answer 15 · answered Jan 08 '17 at 20:31

0

You can try to use Prettyfox UI library http://ng.prettyfox.org

This library use bootstrap 4 styles and not need jquery.

answered Jan 08 '17 at 20:31

Langaner

19
2

score 0 · Answer 16 · answered May 08 '17 at 21:09

0

add the following lines in your html page

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

answered May 08 '17 at 21:09

sriram26

361
3
5

ninetiger · Answer 17 · 2017-06-22T10:02:27.510

0

If you use angular cli, after adding bootstrap into package.json and install the package, all you need is add boostrap.min.css into .angular-cli.json's "styles" section.

One important thing is "When you make changes to .angular-cli.json you will need to re-start ng serve to pick up configuration changes."

Ref:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

edited Jun 22 '17 at 10:02

answered Jun 22 '17 at 09:45

ninetiger

1,106
11
12

score 0 · Answer 18 · answered Jul 26 '17 at 12:32

0

Another very good alternative is to use the skeleton Angular 2/4 + Bootstrap 4

1) Download ZIP and extract zip folder

2) ng serve

answered Jul 26 '17 at 12:32

Janka

1,908
5
20
41

404 resources, can you update? – Adi Prasetyo Nov 16 '22 at 06:36

score 0 · Answer 19 · answered Feb 19 '21 at 00:23

0

Add this to your package.json , “dependency”

"bootstrap": "^3.3.7",

In .angular-cli.json file, to your “Styles” add

"../node_modules/bootstrap/dist/css/bootstrap.css"

update your npm by using this command

npm update

answered Feb 19 '21 at 00:23

gaya3_96

1
1

score 0 · Answer 20 · answered Jul 14 '21 at 08:22

When you run the angular project either with angular_CLI or with Visual Studio 2019, the angular_CLI based on the package.json file downloads or copies files to the node_modules folder. Thus bootstrap and JQuery also exist in that folder so there is no need to install them again. You can use them in this way:

in angular.json file:

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

Notice that since node_modules folder and angular.json file are in the same directory, we should use "./"

in the src/styles.css file:

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

In this File notice that since node_modules are the above folder of styles.css file, we should use “../”

I used this approach in Angular 11.0.1, ASP.NET CORE 5, Visual Studio 2019

How to use Bootstrap in an Angular project?

20 Answers20

Linked