[twitter-bootstrap] Angular 4: How to include Bootstrap?

I'm a backend developer and I'm just playing around with Angular4. So I did this installation tutorial: https://www.youtube.com/watch?v=cdlbFEsAGXo.

Given this, how can I add bootstrap to the app so I could use the class "container-fluid" or "col-md-6" and stuff like that?

This question is related to twitter-bootstrap angular

The answer is


To install the latest use $ npm i --save bootstrap@next


Angular 4 - Bootstrap / @ng-bootstrap setup

First install bootstrap into your project using below command:

npm install --save bootstrap

Then add this line "../node_modules/bootstrap/dist/css/bootstrap.min.css" to angular-cli.json file (root folder) in styles

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

After installing the above dependencies, install ng-bootstrap via:

npm install --save @ng-bootstrap/ng-bootstrap

Once installed you need to import main module.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

After this, you can use All the Bootstrap widgets (ex. carousel, modal, popovers, tooltips, tabs etc.) and several additional goodies ( datepicker, rating, timepicker, typeahead).


you work with cdn for bootstrap and jquery or install bootstarp directly in app with:

npm install ngx-bootstrap --save

also use https://ng-bootstrap.github.io/#/home, but this is not approperiate

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a


In order to configure/integrate/use Bootstrap in angular, first we need to install Bootstrap package using npm.

Install package

$ npm install [email protected] --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Note: --save command will save the dependency in our angular app inside package.json file.

Now that we have the package installed with above step, now we can tell Angular CLI that it needs to load these styles by using any of the below options or both:

option 1) Adding into the file src/styles.css

we can add the dependencies as shown below:

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

Option 2) Adding into angular-cli.json or angular.json

We can add the style css files into angular-cli.json or angular.json file which is at root folder of our angular app as shown below:

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

Tested In Angular 7.0.0

Step 1 - Install the required dependencies

npm install bootstrap (if you want specific version please specify the version no.)

npm install popper.js (if you want specific version please specify the version no.)

npm install jquery

Versions I have tried:

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

Step 2 : Specify the libraries in below orderin angular.json. In latest angular , the config file name is angular.json not angular-cli.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },

For below detail steps and working example, you can visit https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

Very details steps with proper explanation.

Steps: Installing Bootstrap from NPM

Next, we need to install Bootstrap. Change the directory to the project we created (cd angular-bootstrap-example) and execute the following command:

For Bootstrap 3:

npm install bootstrap --save

For Bootstrap 4 (currently in beta):

npm install bootstrap@next --save

OR Alternative: Local Bootstrap CSS As an alternative, you can also download the Bootstrap CSS and add it locally to your project. I donwloaded Bootstrap from the website and created a folder styles (same level as styles.css):

Note: Don’t place your local CSS files under assets folder. When we do the production build with Angular CLI, the CSS files declared in the .angular-cli.json will be minified and all styles will be bundled into a single styles.css. The assets folder is copied to the dist folder during the build process (the CSS code will be duplicated). Only place your local CSS files under assets in case you are importing them directly in the index.html.

Importing the CSS 1.We have two options to import the CSS from Bootstrap that was installed from NPM:

strong text1: Configure .angular-cli.json:

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

2: Import directly in src/style.css or src/style.scss:

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

I personally prefer to import all my styles in src/style.css since it’s been declared in .angular-cli.json already.

3.1 Alternative: Local Bootstrap CSS If you added the Bootstrap CSS file locally, just import it in .angular-cli.json

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

or src/style.css

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4: Bootstrap JavaScript Components with ngx-bootstrap (Option 1) In case you don’t need to use Bootstrap JavaScript components (that require JQuery), this is all the setup you need. But if you need to use modals, accordion, datepicker, tooltips or any other component, how can we use these components without installing jQuery?

There is an Angular wrapper library for Bootstrap called ngx-bootstrap that we can also install from NPM:

npm install ngx-bootstrap --save

Noteng2-bootstrap and ngx-bootstrap are the same package. ng2-bootstrap was renamed to ngx-bootstrap after #itsJustAngular.

In case you want to install Bootstrap and ngx-bootstrap at the same time when you create your Angular CLI project:

npm install bootstrap ngx-bootstrap --save

4.1: Adding the required Bootstrap modules in app.module.ts

Go through the ngx-bootstrap and add the modules needed in your app.module.ts. For example, suppose we want to use the Dropdown, Tooltip and Modal components:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

Because we call the .forRoot() method for each module (due the ngx-bootstrap module providers), the functionalities will be available in all components and modules of your project (global scope).

As an alternative, if you would like to organize the ngx-bootstrap in a different module (just for organization purposes in case you need to import many bs modules and don’t want to clutter your app.module), you can create a module app-bootstrap.module.ts, import the Bootstrap modules (using forRoot()) and also declare them in the exports section (so they become available to other modules as well).

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

At last, don’t forget to import your bootstrap module in you app.module.ts.

import { AppBootstrapModule } from './app-bootstrap/app-bootstrap.module';

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap works with Bootstrap 3 and 4. And I also made some tests and most of the functionalities also work with Bootstrap 2.x (yes, I still have some legacy code to maintain).

Hope this help someone!


|*| Installing Bootstrap 4 for Angular 2, 4, 5, 6 + :

|+> Install Bootstrap with npm

npm install bootstrap --save

npm install popper.js --save

|+> Add styles and scripts to angular.json

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]

For bootstrap 4.0.0-alph.6

npm install [email protected] jquery tether --save

Then after this is done run:

npm install

Now. Open .angular-cli.json file and import bootstrap, jquery, and tether:

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

And now. You ready to go.


As i can see you already got lots of answer but you can try this method to .

Its best practice not to use jquery in angular, I prefer https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md method to install bootstrap without using bootstrap js component which depends on jquery.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Keep your code jquery free in angular


Angular 6 CLI, just do:

ng add @ng-bootstrap/schematics


Run the following command in your project i.e npm install [email protected] --save

After installing the above dependency run the following npm command which will install the bootstrap module npm install --save @ng-bootstrap/ng-bootstrap

Check this out for the reference - https://github.com/ng-bootstrap/ng-bootstrap

Add the following import into app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; and add NgbModule to the imports

In your stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";


first install bootstrap in your project using npm npm i bootstrap after that open ur style.css file in your project and add this line

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

and that's it bootstrap added in your project


If you are on Angular 6+ add the following lines of code to angular.json:

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

npm install --save bootstrap

afterwards, inside angular-cli.json (inside the project's root folder), find styles and add the bootstrap css file like this:

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

UPDATE:
in angular 6+ angular-cli.json was changed to angular.json.


If you want to use bootstrap online and your application has access to the internet you can add

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

Into you'r main style.css file. and its the simplest way.

Reference : angular.io

Note. This solution loads bootstrap from unpkg website and it need to have internet access.


Adding bootstrap current version 4 to angular:

1/ First you have to install those:

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

2/ Then add the needed script files to scripts in angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],

3/Finally add the Bootstrap CSS to the styles array in angular.json:

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

check this link


add into angular-cli.json

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

It will be work, i checked it.


Step 1 : npm install bootstrap --save

Step : 2 : Paste below code in angular.json node_modules/bootstrap/dist/css/bootstrap.min.css

Step 3 : ng serve

enter image description here


Watch Video or Follow the step

Install bootstrap 4 in angular 2 / angular 4 / angular 5 / angular 6

There is three way to include bootstrap in your project
1) Add CDN Link in index.html file
2) Install bootstrap using npm and set path in angular.json Recommended
3) Install bootstrap using npm and set path in index.html file

I recommended you following 2 methods that are installed bootstrap using npm because its installed in your project directory and you can easily access it

Method 1

Add Bootstrap, Jquery and popper.js CDN path to you angular project index.html file

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

Method 2

1) Install bootstrap using npm

npm install bootstrap --save

after the installation of Bootstrap 4, we Need two More javascript Package that is Jquery and Popper.js without these two package bootstrap is not complete because Bootstrap 4 is using Jquery and popper.js package so we have to install as well

2) Install JQUERY

npm install jquery --save

3) Install Popper.js

npm install popper.js --save

Now Bootstrap is Install on you Project Directory inside node_modules Folder

open angular.json this file are available on you angular directory open that file and add the path of bootstrap, jquery, and popper.js files inside styles[] and scripts[] path see the below example

"styles": [   
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [  
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Note: Don't change a sequence of js file it should be like this

Method 3

Install bootstrap using npm follow Method 2 in method 3 we just set path inside index.html file instead of angular.json file

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Now Bootstrap Working fine Now


In Angular4 as you deal with @types system, you should do following things,

Do,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

look for types array and add jquery and bootstrap entries,

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

in head section add following entries,

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

And start using jquery and bootstrap both.


If you are using Sass/Scss, then follow this,

Do npm install

npm install bootstrap --save

and add import statement to your sass/scss file,

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