How to add bootstrap to an angular-cli project

Question

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

Solution 1

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.

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

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

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

4. 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'
  }
};

Solution 2

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.

Solution 3

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

Solution 4

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

Solution 5

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.

View more solutions

Comments

[mjwrazor]

Do you have them in your system-config.ts file? you have to map them.

[Christoph]

Many of the answers below recommend the use of ngx-bootstrap. I found that it is not a full replacement for Bootstrap's jquery plugins and sometimes you still need to use those "native" jquery plugins, such as collapse functionality in tables. In that case look for one of the answers below that explain how to explicitly import the jquery script from the .angular-cli.json file.

[MDF]

stackoverflow.com/questions/43557321/…

[Liam]

Just use ng-bootstrap ng-bootstrap.github.io/#/home

[mjwrazor]

What is ng2-bootstrap exactly. what does adding native bootstrap to angular 2 mean? Sorry I am confused and have looked it up but am still confused. why can't I take these same steps to download bootstrap instead of using a 3rd party ng2-bootstrap.

[mjwrazor]

how does this make bootstrap able to use jquery? I have done this and this does not work.

[mjwrazor]

example finally found this and it worked. I could not figure this out for while.

[Ali Ghanavatian]

@mjwrazor it's because bootstrap is not just about styles. it's a front-end framework. to be clear check out using rating component with ng2-bootstrap and think about the codes you would write to implement it.

[sandrooco]

Great answer, thanks alot! How can I use scss/sass in this way?

[pd farhad]

I never used scss/sass but i think , that would not be that complicated. Btw, if you think it is a good answer dont mind to upvote it :D

[Achuth hadnoor]

github.com/ngCli/ng-cli/issues/18 any help with this issue i glad to get it

[Admin]

Method from Ahmed Hamdy works, apparently code update occured now. Updated his message with solution.

[freethebees]

As I type, this is the only solution that seems to use the latest version of angular-cli.

[user3274901]

Just a small notice for future readers: Angular CLI has switched from SystemJS to WebPack with beta.14. This answer is now outdated, since it provides a solution based on SystemJS.

[Pascal]

The bootstrap.js is surely NOT needed! As you do not want to use the juqery bootstrap.js for this you must install the ng2 directives of bootstrap.

[martin]

IMHO this is also a great option, especially with the latest versions of angular-cli. The great advantage is that this method does not depend on people updating the library from npm package mentioned in the accepted answer; furthermore, this also enables us to possibly override bootstrap variables using SASS while not directly pointing to compiled CSS files.

[mahatmanich]

Yep, it is cleaner and more modular, thus I prefer it!

[Harshit Saklecha]

This doent works for me, any prerequisites to follow, i am using latest version of angular and bootstrap and added all the above changes, didnt worked this way but worked on adding <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> in index.html

[mahatmanich]

This is using the cli setup!

[bruno.bologna]

Thanks for the idea of using ng2-bootstrap, here I found a installation manual for angular cli, on github page. github.com/valor-software/ng2-bootstrap/blob/development/doc‌​s/… In my case there was missing the AlertModule.forRoot() call on imports.

[72GM]

if you want to use Bootstrap 4 then you need to change "npm install ng2-bootstrap bootstrap --save" TO BE "npm install ng2-bootstrap [email protected] --save" .... not entirely obvious in the documentation (do a search for 'card-' in bootstrap.css to know if it has worked) ... note that it is currently Alpha 6 this will change no doubt... check bootstrap site for current npm instruction

[Howard Swope]

If you did want to use the bootstrap javascript as opposed to just the .css you would also need to include its dependencies in the scripts array: "../node_modules/jquery/dist/jquery.slim.js", "../node_modules/tether/dist/js/tether.js", "../node/modules/bootstrap/dist/js/bootstrap.js"

[Admin]

did you mean $projectRoot/.angular-cli.json?

[Robin van der Knaap]

This solution does not add the javascript files for bootstrap, only the css

[Robin van der Knaap]

See this other story: github.com/angular/angular-cli/wiki/stories-global-lib. It describes adding script files, taking bootstrap 4 as an example.

[Pini Cheyni]

Only this one worked for me, I think this process should be more straightforward using the Angular-cli

[Edmond]

I had the same issue with [email protected] & [email protected]. Following this steps with the difference at app.module.ts not referring to ngx-bootstrap by 'ngx-bootstrap/ngx-bootstrap' but by 'ngx-bootstrap' as on this example at github fix my problem.

[Alesh Houdek]

Note that angular-cli.json is now hidden, so you need .angular-cli.json. I suspect that means there's a better way to do this??

[Akshay]

for style.scss I had to add this : @import "../node_modules/bootstrap/dist/css/bootstrap.css";

[A.I]

a cleaner method would be @import '~bootstrap/dist/css/bootstrap'; Using the ~ sign to import like a module directly from node_modules folder. Found an explanation here: stackoverflow.com/questions/39535760/…

[Christoph]

While ngx-bootstrap is nice for the components that it supports, sometimes you still need to use "native" jquery plugins, such as collapse functionality in tables. Then you still need to explicitly import the jquery script, which this answer shows.

[CodyBugstein]

What about putting it in styles array of angular-cli.json? Not neccessary?

[Chanaka Fernando]

No Its not necessary. since we include our style.css file in that array. we can import other css files in our style.css or style.scss "@import "~@angular/material/prebuilt-themes/indigo-pink.css"; "@import "../node_modules/bootstrap/dist/css/bootstrap.css";

[CodyBugstein]

Ah ok.. but I think including in angular-cli.json is probably better

[Dejazmach]

You better use bootstrap.bundle.js in your scripts declaration which also has popper.js.

[Johan Frick]

$brand-primary: red; did not work for me. However, $primary: red;did!

[Shaiju T]

To make work don't miss the last point execute ng serve again. Also why can't Angular CLI add this automatically ? It would be good if we have an option for it.

[Stack crawler]

Thank you for this answer! Unfortunately I can't load bootstrap panels with this. But the alert example you mentioned works. Can you help with that, please?

[Praveen M P]

Adding minified version would be appropriate "../node_modules/bootstrap/dist/css/bootstrap.min.css"

[Keith]

@CodyBugstein I'm not sure if it's necessarily "better" to add it to .angular-cli.json. Here are some reasons why you may want to add imports in your styles.scss file: 1) You can easily apply a bootstrap theme like the Bootswatch example here: github.com/thomaspark/bootswatch 2) Editing .json files is more cumbersome than editing .scss files because .json files don't allow comments, and 3) new developers may look at styles.scss as a starting point for all CSS rather than .angular-cli.json.

[Maludasek]

Finally good solution. Could not find angular-cli.json (angular-cli 6.1.1) so i have changed angular.json file, "styles" section. I've added "node_modules/bootstrap/dist/css/bootstrap.min.css"

[Venkatesh Muniyandi]

Thanks for explaining difference between bootstrap vs boostrap@next :-)

[moshiuramit]

What if want to use bootstrap 3 ?

[racar]

Best for latest versions of angular

[tejeswar]

index.html takes care of every thing. and it is like we add bootstrap to normal html page

[Sydwell]

Mostly the current best answer except remove --save-dev. As you want bootstrap to deployed with your app.

[MWB]

Worked for me, though I needed "./node_modules/bootstrap/dist/css/bootstrap.min.css" instead of "../node_modules/bootstrap/dist/css/bootstrap.min.css"!

[Surya R Praveen]

Cool adding Jquery as well.

[Torsten Barthel]

You need to also include jQuery lib before the bootstrap.js import.

[Ivan]

Note that @import '~bootstrap' is enough. Webpack will find node_modules/bootstrap/project.json which contains an entry "style": "dist/css/bootstrap.css", which Webpack will use. Also note that this CSS file is not minified, which is good, since the CSS file will go through the same pipeline as the rest of application CSS files, which will get minified for production, and a proper source map will be produced as well.

[Palanikumar]

Upvoted for point 4 (Restart your local server) I am using ---> npm install ngx-bootstrap bootstrap --save

[Jijo Thomas]

The order of files matters.

[scoochy]

Just as an addition, to check version in Angular v12, you just use ng v