Velvet Star Monitor

Standout celebrity highlights with iconic style.

updates

How to add bootstrap to an angular-cli project

Writer Matthew Barrera

We want to use bootstrap 4 (4.0.0-alpha.2) in our app generated with angular-cli 1.0.0-beta.5 (w/ node v6.1.0).

After getting bootstrap and its dependencies with npm, our first approach consisted in adding them in angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',
'jquery/dist/jquery.min.+(js|map)',
'tether/dist/**/*.min.+(js|css)',

and import them in our index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

This worked fine with ng serve but as soon as we produced a build with -prod flag all these dependencies disappeared from dist/vendor (surprise !).

How we are intended to handle such scenario (i.e. loading bootstrap scripts) in a project generated with angular-cli ?

We had the following thoughts but we don't really know which way to go...

  • use a CDN ? but we would rather serve these files to guarantee that they will be available

  • copy dependencies to dist/vendor after our ng build -prod ? But that seems like something angular-cli should provide since it 'takes care' of the build part ?

  • adding jquery, bootstrap and tether in src/system-config.ts and somehow pull them into our bundle in main.ts ? But that seemed wrong considering that we are not going to explicitly use them in our application's code (unlike moment.js or something like lodash, for example).

4

41 Answers

12

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:

  1. 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.

  1. Open src/app/app.module.ts and add:

    import { AlertModule } from 'ngx-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(), ... ],
...
})

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

  3. Open src/app/app.component.html and add:

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

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' }
};
13

Looking up for the keyword > Global Library Installation on 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.

7

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

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

Since nobody referred to the official (angular-cli team) story on how to include Bootstrap yet:

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>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>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.

4

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="" 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.

2

  1. Install bootstrap

    npm install bootstrap@next

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

  3. Last add bootstrap.css to your code style.scss

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

  4. Restart your local server

3

Steps for Bootstrap 4 in Angular 5

  1. Create Angular 5 Project

    ng new AngularBootstrapTest

  2. Move to project directory

    cd AngularBootstrapTest

  3. Download bootstrap

    npm install bootstrap

  4. 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

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

.

<button type="button">Primary</button>

you can refer the button styles here( )

  1. save the file

  2. 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

  1. Install Bootstrap ( am installing latest version)
npm install bootstrap@next
  1. 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

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>
2

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 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:

  1. npm install --save bootstrap

  2. 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

  1. 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/", "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.

  1. Install bootstrap, popper.js

npm install --save bootstrapnpm install --save popper.js

  1. 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="" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="" 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">Primary</button>
<button type="button">Secondary</button>
<button type="button">Success</button>
<button type="button">Danger</button>
<button type="button">Warning</button>
<button type="button">Info</button>
<button type="button">Light</button>
<button type="button">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(');
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. (around minutes 13:00)

  1. Run in bash npm install ng2-bootstrap bootstrap --save
  2. 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

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

To make sure everything is set up correctly, run ng serve > open browser at or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, then you are good to use boostrap.enter image description here

Step1:
npm install bootstrap@latest --save-devThis 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"

1

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.

1

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

  1. import bootstrap stylessheet in angular.json file.

    "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

  2. and you are ready to use bootstrap for styling, grid etc.

    <div>My first bootstrap div</div>

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 {
}
<p> <ngb-alert [dismissible]="false"> <strong>Warning!</strong> Better check yourself, you're not looking too good. </ngb-alert>
</p>

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Similar Journal

View All

How do Steam Trading cards and the trade system work?

May 2026

Goblin Battle Standard doesn't summon the goblin army

May 2026

Is there a way to locate Strategic Resources on the map?

May 2026

How do I properly provide places to ship freight?

May 2026