Bootstrap is a web development framework for more faster and easier that includes HTML and CSS based responsive design templates. So in the tutorial, we show how to integrate Bootstrap with Angular project.
Related posts:
– How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite
– Angular NgFor Repeater Directive – Loop over a Collection (Angular 6)
Contents
Technologies
- Node.js – version v10.4.0
- Angular – version 6
- Bootstrap – 3.x & 4.x
- Visual Studio Code – version 1.24.0
Goal
After tutorial, we can integrate Bootstrap to Angular project.
-> Project structure:
-> results:
Integrate Bootstrap with Angular project
We have 3 approaches:
- Include Bootstrap from CDN
- Include Local Bootstrap
- Install Bootstrap via NPM
Preparation
– Create an Angular project:
– Generate 3 components {BootstrapJumbotron
, BootstrapTable
, BootstrapModel
}
Change AppComponent template file app.component.html
as below:
Include Bootstrap from CDN
Bootstrap 3
Include Bootstrap 3 Style & JQuery Script from CDN (Content Delivery Network) to ‘index.html’ file.
-> Details:
AngularBootstrap %MINIFYHTMLefa68e9f6933ce7391d5240ab357adcb18% %MINIFYHTMLefa68e9f6933ce7391d5240ab357adcb19%%MINIFYHTMLefa68e9f6933ce7391d5240ab357adcb20%
Bootstrap 4
Include Bootstrap 4 Style & JQuery Script from CDN (Content Delivery Network) to ‘index.html’ file.
-> Details:
AngularBootstrap %MINIFYHTMLefa68e9f6933ce7391d5240ab357adcb21%%MINIFYHTMLefa68e9f6933ce7391d5240ab357adcb22%%MINIFYHTMLefa68e9f6933ce7391d5240ab357adcb23%
Include Local Bootstrap
Please follow below links to download Bootstrap:
Create bootstrap folder under /src
folder, then add bootstrap-4.1.1-dist
with Bootstrap 4 (or bootstrap-3.3.7-dist
with Bootstrap 3).
Download JQuery at link: jquery-3.3.1.min.js. Then create a jquery folder under /src
folder -> Add jquery-3.3.1.min.js
file to it:
Configure Bootstrap & JQuery in angular.json
file:
... "styles": [ "src/styles.css", "src/bootstrap/bootstrap-4.1.1-dist/css/bootstrap.min.css" ], "scripts": [ "src/jquery/jquery-3.3.1.min.js", "src/bootstrap/bootstrap-4.1.1-dist/js/bootstrap.min.js" ] ...
Install Bootstrap via NPM
Use NPM to download Bootstrap & JQuery. Bootstrap and jQuery will be installed into the node_modules
folder.
– With Bootstrap 3, use cmd:
npm install bootstrap@3.3.7 jquery --save
– With Bootstrap 4, use cmd:
npm install bootstrap jquery --save
Configure installed Bootstrap & JQuery in angular.json
file:
... "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] ...
Bootstrap Code
Bootstrap Jumbtron
In BootstrapJumbotronComponent component, modify template bootstrap-jumbotron.component.html
file with jumbotron
class:
Bootstrap - Angular
JavaSampleApproach guides how to integrate Bootstrap with Angular project!
Bootstrap Table
In BootstrapTableComponent component, modify bootstrap-table.component.ts
class as below:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-bootstrap-table', templateUrl: './bootstrap-table.component.html', styleUrls: ['./bootstrap-table.component.css'] }) export class BootstrapTableComponent{ CUSTOMERS: Customer[] = [ {id: 1, firstname: 'Mary', lastname: 'Taylor', age: 24}, {id: 2, firstname: 'Peter', lastname: 'Smith', age: 18}, {id: 3, firstname: 'Lauren', lastname: 'Taylor', age: 31} ]; } class Customer { id: number; firstname: string; lastname: string; age: number }
Then use Bootstrap table
class to modify template file bootstrap-table.component.html
:
Id | FirstName | LastName | Age |
---|---|---|---|
{{ customer.id }} | {{ customer.firstname }} | {{ customer.lastname }} | {{ customer.age }} |
Bootstrap Modal
In BootstrapModalComponent component, modify template bootstrap-modal.component.html
file as below:
Run & Check Results
Run above Angular project by cmd: ng serve --open
-> Open Modal:
SourceCode
How to run the below sourcecode:
1. Download Integrate-Angular-Bootstrap.zip file -> Then extract it to Integrate-Angular-Bootstrap folder. 2. Go to Integrate-Angular-Bootstrap folder 3. Run the app by commandline: ng serve --open
-> Source Code: