CODEWITHSUNDEEP
angulartwitter-bootstrapangular-clingx-bootstrap
Jerome
Jerome

Reputation: 4582

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

Upvotes: 322

Views: 877756

Answers (30)

Thusitha Bandara
Thusitha Bandara

Reputation: 89

Follow this Step

  1. Using Angular-CLI execute npm install --save bootstrap
  2. Add "./node_modules/bootstrap/dist/css/bootstrap.min.css" in angular.json file"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ],

Upvotes: 2

Sushil
Sushil

Reputation: 830

First install Bootstrap

npm i bootstrap

import into angular.json style

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

Upvotes: 2

Nelly Sattari
Nelly Sattari

Reputation: 2773

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.

Upvotes: 205

Dificilcoder
Dificilcoder

Reputation: 517

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

Upvotes: 7

scoochy
scoochy

Reputation: 1130

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

Upvotes: 0

adnan2nd
adnan2nd

Reputation: 2201

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

Upvotes: 3

Santosh
Santosh

Reputation: 1313

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>

Upvotes: 2

manikandan
manikandan

Reputation: 815

Add this in your styles.css file

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

Upvotes: 0

Mateen
Mateen

Reputation: 1671

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

Upvotes: 9

Nishant Ingle
Nishant Ingle

Reputation: 883

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>

Upvotes: 3

Bhavesh Ajani
Bhavesh Ajani

Reputation: 1261

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

Upvotes: 1

VIKAS KATARIYA
VIKAS KATARIYA

Reputation: 6005

Run This Command

npm install bootstrap@3

your Angular.json

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

Upvotes: 7

Farid Rajab
Farid Rajab

Reputation: 77

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

Upvotes: 1

Xjw919
Xjw919

Reputation: 265

  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

Upvotes: 12

ichbinpradnya
ichbinpradnya

Reputation: 31

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

Upvotes: 2

pd farhad
pd farhad

Reputation: 6432

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

Upvotes: 345

Alexander Zaldostanov
Alexander Zaldostanov

Reputation: 3011

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.

Upvotes: 2

Andris
Andris

Reputation: 4203

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.

Upvotes: 1

kireeti9
kireeti9

Reputation: 288

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"

Upvotes: 2

tejeswar
tejeswar

Reputation: 1

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>

Upvotes: 0

Srinivas
Srinivas

Reputation: 909

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

Upvotes: 0

Alekya
Alekya

Reputation: 243

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.

Upvotes: 0

Tadele Ayelegn
Tadele Ayelegn

Reputation: 4716

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. enter image description here

Upvotes: 2

oklm
oklm

Reputation: 133

  1. Install bootstrap, popper.js

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

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

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

Upvotes: 3

Alberto Viezzi
Alberto Viezzi

Reputation: 341

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

Upvotes: 33

mahatmanich
mahatmanich

Reputation: 11033

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

Upvotes: 77

Konvivial
Konvivial

Reputation: 99

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

Upvotes: 5

Slupek
Slupek

Reputation: 26

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.

Upvotes: 0

rashidnk
rashidnk

Reputation: 4292

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" class="btn btn-primary">Primary</button>

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

  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

Upvotes: 9

L&#233;ger Djiba
L&#233;ger Djiba

Reputation: 51

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

Upvotes: 5

Related Questions