How to Integrate Bootstrap with Angular (Angular 6)

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)

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:

Angular-6-Bootstrap + Project-Structure

-> results:

Angular-6-Bootstrap + integrate-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:

Angular-6-Bootstrap + Create-Angular-Project

– Generate 3 components {BootstrapJumbotron, BootstrapTable, BootstrapModel}

Angular-6-Bootstrap + Generate-Angular-Components

Change AppComponent template file app.component.html as below:

<div class="container">
  <app-bootstrap-jumbotron></app-bootstrap-jumbotron>
  <app-bootstrap-table></app-bootstrap-table>
  <app-bootstrap-modal></app-bootstrap-modal>
</div>

Include Bootstrap from CDN

Bootstrap 3

Include Bootstrap 3 Style & JQuery Script from CDN (Content Delivery Network) to ‘index.html’ file.

-> Details:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularBootstrap</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <app-root></app-root>
</body>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>

Bootstrap 4

Include Bootstrap 4 Style & JQuery Script from CDN (Content Delivery Network) to ‘index.html’ file.

-> Details:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularBootstrap</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
  <app-root></app-root>
</body>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</html>
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:

Angular-6-Bootstrap + add-bootstrap-jquery-folders

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:

<div class="jumbotron">
  <h1>Bootstrap - Angular</h1> 
  <p><a href="https://ozenero.com">JavaSampleApproach</a> guides how to integrate Bootstrap with Angular project!</p>
</div>
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 :

<table class="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>FirstName</th>
      <th>LastName</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
      <tr *ngFor="let customer of CUSTOMERS">
          <td>{{ customer.id }}</td>
          <td>{{ customer.firstname }}</td>
          <td>{{ customer.lastname }}</td>
          <td>{{ customer.age }}</td>
      </tr>
  </tbody>
</table>

Bootstrap Modal

In BootstrapModalComponent component, modify template bootstrap-modal.component.html file as below:

<!-- Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open Modal
</button>
  
<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">
        Modal Body ...
      </div>

      <!-- Modal Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Run & Check Results

Run above Angular project by cmd: ng serve --open

Angular-6-Bootstrap + integrate-results

-> Open Modal:

Angular-6-Bootstrap + integrate-results-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:

Integrate-Angular-Bootstrap

3 thoughts on “How to Integrate Bootstrap with Angular (Angular 6)”

  1. Terrific work! This is the type of information that are supposed to be
    shared across the internet. Disgrace on Google for now not positioning this post upper!

    Come on over and talk over with my web site . Thanks =)

    Reply

  2. Hola! I’ve been reading your site for a long time now and finally got the bravery
    to go ahead and give you a shout out from Humble Tx! Just wanted to say keep up the great work!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *