🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

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).
twitter-bootstrap angular
by

3 Answers

rahul07
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.
RoliMishra
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"

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

Login / Signup to Answer the Question.

LoginSignup