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?
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.
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 order to configure/integrate/use Bootstrap in angular, first we need to install Bootstrap package using npm.
$ npm install bootstrap@4.0.0-alpha.6 --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:
we can add the dependencies as shown below:
@import "~bootstrap/dist/css/bootstrap.min.css";
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"
]
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).
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.
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!
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 bootstrap 4.0.0-alph.6
npm install bootstrap@4.0.0-alpha.6 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
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"
],`
Run the following command in your project i.e npm install bootstrap@4.0.0-alpha.5 --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";
If you want to use bootstrap online and your application has access to the internet you can add
@import url('https://unpkg.com/bootstrap@3.3.7/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.
|*| 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"
]
...
}]
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
