How to add bootstrap to an angular-cli project

IMPORTANT UPDATE: ng2-bootstrap is now replaced by ngx-bootstrap

ngx-bootstrap supports both Angular 3 and 4.

Update : 1.0.0-beta.11-webpack or above versions

First of all check your angular-cli version with the following command in the terminal:

ng -v

If your angular-cli version is greater than 1.0.0-beta.11-webpack, then you should follow these steps:

Install ngx-bootstrap and bootstrap: npm install ngx-bootstrap bootstrap --save

This line installs Bootstrap 3 nowadays, but can install Bootstrap 4 in the future. Keep in mind ngx-bootstrap supports both versions.

Open src/app/app.module.ts and add: import { AlertModule } from 'ngx-bootstrap'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ... ], ... }) Open angular-cli.json (for angular6 and later file name changed to angular.json ) and insert a new entry into the styles array: "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], Open src/app/app.component.html and add: hello

1.0.0-beta.10 or below versions:

And, if your angular-cli version is 1.0.0-beta.10 or below, then you can use below steps.

First, go to the project directory and type:

npm install ngx-bootstrap --save

Then, open your angular-cli-build.js and add this line:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Now, open your src/system-config.ts then write:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...and:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

---

Looking up for the keyword > Global Library Installation on https://github.com/angular/angular-cli helps you find the answer.

As per their document, you can take the following steps to add the Bootstrap library.

First, install Bootstrap from npm:

npm install bootstrap

Then add the needed script file to apps[0].scripts in the angular.json file:

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

The above step is important for certain functionality to work such as the displaying of the dropdown menu.

Finally add the Bootstrap CSS file to the apps[0].styles array in the angular.json file:

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

Restart ng serve if you're running it, otherwise the changes will not be visible. Bootstrap 4+ should now be working on your app.

Alternative solution: Another solution to add Bootstrap to Angular would be to make use of the ngx-bootstrap project which provides Bootstrap components powered by Angular. Please look at this answer to learn more regarding the use of ngx-boostrap with Angular or the ngx-bootstrap project's own documentation.

---

Do the following:

npm i bootstrap@next --save

This will add bootstrap 4 to your project.

Next go to your src/style.scss or src/style.css file (choose whichever you are using) and import bootstrap there:

For style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

For style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

For scripts you will still have to add the file in the angular-cli.json file like so (In Angular version 6, this edit needs to be done in the file angular.json):

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

---

At first, you have to install tether, jquery and bootstrap with these commands

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

After add these lines in your angular-cli.json (angular.json from version 6 onwards) file

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

---

Since nobody referred to the official (angular-cli team) story on how to include Bootstrap yet: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Include Bootstrap

Bootstrap is a popular CSS framework which can be used within an Angular project. This guide will walk you through adding bootstrap to your Angular CLI project and configuring it to use bootstrap.

Using CSS

Getting Started

Create a new project and navigate into the project

ng new my-app
cd my-app

Installing Bootstrap

With the new project created and ready you will next need to install bootstrap to your project as a dependency. Using the --save option the dependency will be saved in package.json

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

Configuring Project

Now that the project is set up it must be configured to include the bootstrap CSS.

Open the file .angular-cli.json from the root of your project.

Under the property apps the first item in that array is the default application.

There is a property styles which allows external global styles to be applied to your application.

Specify the path to bootstrap.min.css

It should look like the following when you are done:

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

Note: When you make changes to .angular-cli.json you will need to re-start ng serve to pick up configuration changes.

Testing Project

Open app.component.html and add the following markup:

<button class="btn btn-primary">Test Button</button>

With the application configured, run ng serve to run your application in develop mode. In your browser navigate to the application localhost:4200. Verify the bootstrap styled button appears.

Using SASS

Getting Started

Create a new project and navigate into the project

ng new my-app --style=scss
cd my-app

Installing Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

Configuring Project

Create an empty file _variables.scss in src/.

If you are using bootstrap-sass, add the following to _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

In styles.scss add the following:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Testing Project

Open app.component.html and add the following markup:

<button class="btn btn-primary">Test Button</button>

With the application configured, run ng serve to run your application in develop mode. In your browser navigate to the application localhost:4200. Verify the bootstrap styled button appears. To ensure your variables are used open _variables.scss and add the following:

$brand-primary: red;

Return the browser to see the font color changed.

---

Update v1.0.0-beta.26

You can see on the doc for the new way for importing bootstrap here

If it still does not work, restart with the command ng serve

1.0.0 or below versions:

In your index.html file you just need bootstrap css link (no need js scripts)

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

And

npm install ng2-bootstrap --save
npm install moment --save

After having installed ng2-bootstrap in my_project/src/system-config.ts :

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

And in my_project/angular-cli-build.js :

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

Don't forget this command to put your module in the vendor :

ng build

to import from another module that is the same principle.

---

Install bootstrap npm install bootstrap@next Add code to .angular-cli.json: "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" ], Last add bootstrap.css to your code style.scss @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; Restart your local server

---

Steps for Bootstrap 4 in Angular 5

Create Angular 5 Project ng new AngularBootstrapTest Move to project directory cd AngularBootstrapTest Download bootstrap npm install bootstrap Add Bootstrap to Project 4.1 open .angular-cli.json 4.2 find the "styles" section in the json 4.3 add the bootstrap css path as below . "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],

Now you have succesfully added the bootstrap css in angular 5 project

Test bootstrap

open src/app/app.component.html add bootstrap button component

.

<button type="button" class="btn btn-primary">Primary</button>

you can refer the button styles here( https://getbootstrap.com/docs/4.0/components/buttons/ )

save the file run the project ng serve --open

Now You will see the bootstrap style button in the page

Note : if you added bootstrap path after ng serve , you must stop and rerun the ng serve to reflect the changes

---

2 simple steps

Install Bootstrap ( am installing latest version)

npm install bootstrap@next

Import into your project, add below line in your styles.scss

@import '~bootstrap';

Please Note your order of imports might matter, if you have other libraries which uses bootstrap, please keep this import statement on top

The End. :)

NOTE: below are my versions

angular : 9

node : v10.16.0

npm : 6.9.1

---

I guess the above methods have changed after the release, check this link out

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

initiate project

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

install ng-bootstrap and bootstrap

npm install ng2-bootstrap bootstrap --save

open src/app/app.module.ts and add

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

open angular-cli.json and insert a new entry into the styles array

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

open src/app/app.component.html and test all works by adding

<alert type="success">hello</alert>

---

Run This Command

npm install bootstrap@3

your Angular.json

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

---

Since this became so confusing and the answers here are totally mixed I will just suggest going with the official ui-team for BS4 repo (yes there are so many of those repos for NG-Bootstrap.

Just follow the instructions here https://github.com/ng-bootstrap/ng-bootstrap to get BS4.

Quoting from the lib:

This library is being built from scratch by the ui-bootstrap team. We are using TypeScript and targeting the Bootstrap 4 CSS framework. As with Bootstrap 4, this library is a work in progress. Please check out our list of issues to see all the things we are implementing. Feel free to make comments there.

Just copy pasting what is there for the sake of it:

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

Once installed you need to import our main module:

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

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):

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

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import NgbModule:

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

This seems to be the most consistent behavior by far

---

Do the following steps:

npm install --save bootstrap And in your .angular-cli.json, add to styles section:

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

After that, you must restart your ng serve

Enjoy

---

Install Bootstrap using npm npm install bootstrap

2.Install Popper.js

npm install --save popper.js

3.Goto angular.json in Angular 6 project / .angular-cli.json in Angular 5 and add the listed:

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

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

---

Open Terminal/command prompt in the respective project directory and type following command.

npm install --save bootstrap

Then open .angular-cli.json file, Look for

"styles": [ "styles.css" ],

change that to

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

All done.

---

Now with new ng-bootstrap 1.0.0-beta.5 version supports most of the native Angular directives based on Bootstrap's markup and CSS.

The only dependency required to work with this is bootstrap. No Need to use jquery and popper.js dependencies.

ng-bootstrap is to completely replaced JavaScript implementation for components. So you don't need to include bootstrap.min.js in the scripts section in your .angular-cli.json.

follow these steps when you are integrating bootstrap with generated project with angular-cli latest version.

Inculde bootstrap.min.css in your .angular-cli.json, styles section. "styles": [ "styles.scss", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ],

Install ng-bootstrap dependency. npm install --save @ng-bootstrap/ng-bootstrap

Add this to your main module class. import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Include the following in your main module imports section. @NgModule({ imports: [NgbModule.forRoot(), ...], })

Do the following also in your sub module(s) if you are going to use ng-bootstrap components inside those module classes. import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [NgbModule, ...], })

Now your project is ready to use available ng-bootstrap components.

---

Install bootstrap, popper.js

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

In src/styles.css, import bootstrap's style

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

---

I see lot of the solutions don't work anymore with the new versions of Angular-CLI.

You can try to add the following link tag at top and script tags at the bottom in your app.component.html.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

But if you want to use ngx-bootstrap then run the following command in your project directory

ng add ngx-bootstrap

Test it out with following as the content of your app.component.html

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

---

for bootstrap 4.5, angular 10

npm install bootstrap --save

update your styles.scss like this with bootstrap import statement.

 $theme-colors: (
    "primary":    #b867c6,
    "secondary":  #f3e5f5,
    "success":    #388e3c,
    "info":       #00acc1,
    "light":      #f3e5f5,
    "dark":       #863895
);

@import "~bootstrap";

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body {
    color: gray('800');
    background-color: theme-color('light');
    font-family: 'Raleway', sans-serif;
}

importing bootstrap should be after your variable overwrites. [this example also shows how you can put your own theme colors.]

---

Install boostrap

npm install --save bootstrap

Then we need to import Bootstrap Sass into our application. In styles.scss add this line:

@import "../node_modules/bootstrap/scss/bootstrap.scss";

For more info...

---

You can also watch this video by Mike Brocchi which has useful information on how to add bootstrap to your Angular-Cli generated project. https://www.youtube.com/watch?v=obbdFFbjLIU (around minutes 13:00)

---

Run in bash npm install ng2-bootstrap bootstrap --save Add/Change the following in angular-cli.json "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

---

Try this

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

---

Run this following command inside the project

npm install --save @bootsrap@4

and if you get a confirmation like this

+ bootstrap@4.1.3
updated 1 package in 8.245s

It means boostrap 4 is successfully installed. However, in order to use it, you need to update the "styles" array under the angular.json file.

Update it the following way so that bootstrap will be able to override the existing styles

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

https://i.stack.imgur.com/V2GGK.png

---

Step1:
npm install bootstrap@latest --save-dev This will install the latest version of the bootstrap, However, the specified version can be installed by adding the version number

Step2: Open styles.css and add the following @import "~bootstrap/dist/css/bootstrap.css"

---

For Adding Bootstrap and Jquery both

npm install bootstrap@3 jquery --save

after running this command, please go ahead and check your node_modules folder you should be able to see bootstrap and jquery added into it.

---

If you have just started with angular and bootstrap then simple answer would be below steps: 1. Add node package of bootstrap as dev dependency

npm install --save bootstrap

import bootstrap stylessheet in angular.json file. "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ], and you are ready to use bootstrap for styling, grid etc.

The best part of this which I found was that we are directing using bootstrap without any third-party module dependency. We can upgrade bootstrap anytime by just updating the command npm install --save bootstrap@4.4 etc.

---

Updated Aug-2020: Angular 10

"If you have an Angular ≥ 9 CLI project, you could simply use our schematics to add ng-bootstrap library to it." Just run the following command inside your project folder. All the configurations will be automatically added.

ng add @ng-bootstrap/ng-bootstrap

ng s

Sample Snippets:

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

@Component({selector: 'ngbd-alert-basic', templateUrl: './alert-basic.html'})
export class NgbdAlertBasic {
}

Warning! Better check yourself, you're not looking too good.

---

angular-cli now has a dedicated wiki page where you can find everything you need. TLDR, install bootstrap via npm and add the styles link to "styles" section in your .angular-cli.json file

---

Working example in case of using angular-cli and css :

1.install bootstrap

npm install bootstrap tether jquery --save

2.add to .angular-cli.json

  "styles": [
    "../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"
  ],

---