[angular] How to add bootstrap to an angular-cli project

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

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

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

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.

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

2. import bootstrap stylessheet in angular.json file.

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

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

   <div class="container">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 [email protected] etc.

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

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>

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.

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 using npm

npm install boostrap@next --save

then check your node_modules folder for boostrap.css file(within dist) normally the path is

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

add this path | import boostrap within style.css or style.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

that's it.

Run This Command

npm install bootstrap@3

your Angular.json

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

you can install bootstrap in angular using npm install bootstrap command.

and next setup bootstrap path in angular.json file and style.css file.

you can read a full blog about how to install & setup bootstrap in angular, click here to read full blog about this

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.

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.

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"

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

npm i -S tether
npm i -S jquery
npm i -S [email protected] 

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

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

5. open src/app/app.component.html
6. 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/ )

7. save the file

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

1. Install bootstrap, popper.js

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

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

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

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/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

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

It doesn't matter which JS framework you are using, importing bootstrap to your project is easy by following 2 steps below:

Install bootstrap using npm i -S bootstrap or yarn add bootstrap.

In styles.css or styles.scss, import bootstrap as @import '~bootstrap/dist/css/bootstrap.min.css'.

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>

Install bootstrap using npm i --save bootstrap@version.Now,go to nodemodules folder and from bootstrap folder copy the path of 'bootstrap.min.css.js' and paste the full path(like nodemodules/bootstrap/css/bootstrap.min.css.js) in angular.json under script tag file and re-run the server and to check whether the installation is successful run the program in any browser you like and press F12 you'll find a part of the window gets opened,now go to elements tab open head tag and if you see bootstrap in style tag,then your installation is successful.

2 simple steps

1. Install Bootstrap ( am installing latest version)

npm install bootstrap@next

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

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

Didn't see this one here:

@import 'bootstrap/scss/bootstrap.scss';

I just added this line in style.scss In my case i also wanted to override bootstrap variables.

Good News! Basically, Bootstrap 5 can be implemented easily now, and you don't even need jQuery.
From your terminal, just run

npm install bootstrap@next --save

So, Angular uses webpack, therefore, in your app.module.ts, just add:

import "bootstrap";

Or if you want to import them separately, do it like:

import { ModuleToBeImported } from 'bootstrap';

Then to your styles.scss, add:

@import '~bootstrap/scss/bootstrap';

Basically that's it, BUT beware that some components require popper.js. Components requiring bootstrap's js There you'll see the components dependent on popper.js too, which at the time of writing this are Dropdowns for displaying and positioning, and Tooltips and popovers for displaying and positioning.

Therefore, to install popper.js, just run:

npm install @popperjs/core

Reference

Try this

npm install bootstrap@next

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

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.

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

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

First install Bootstrap from npm:

npm install bootstrap@next

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

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

Finally add the Bootstrap CSS to the apps[0].styles array:

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

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

This is best solution. But if you don't restart ng serve it never works. It is strongly recommended to do this last action.

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 this following command inside the project

npm install --save @bootsrap@4

and if you get a confirmation like this

+ [email protected]
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 http://localhost:4200/ 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.

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/[email protected]/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>

A working example in case of using angular-cli:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

Works for css and scss. Bootstrap v3 and v4 are available.

More information about bootstrap-schematics please find here.

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

Add this in your styles.css file

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

Just add these three lines in Head tag in index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

You have many ways to add Bootstrap 4 in your Angular project:

• Including the Bootstrap CSS and JavaScript files in the section of the index.html file of your Angular project with a and tags,

• Importing the Bootstrap CSS file in the global styles.css file of your Angular project with an @import keyword.

• Adding the Bootstrap CSS and JavaScript files in the styles and scripts arrays of the angular.json file of your project

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