Bootstrap is most popular css framework for developing responsive and mobile first websites.
In this article, we’ll see different ways to install bootstrap 4 in angular application. Here I’m using angular version 9 in this article.
Table of Contents
Creating Angular project using Angular CLI
Now we’ll create Angular project. The easiest way to create Angular application is using Angular CLI.
So for that, We’ll need to first install the angular cli package. You can install npm package Angular CLI using the following command
Install angular cli
npm install -g @angular/cli
Generate project
Now generate angular project using angular cli command
ng new angular-bootstrap4-sample
and then you’ll be asked to choose the stylesheet format, select css format because we’ll install css version of bootstrap and hit enter.

Then Angular CLI will create necessary file and folders and will install the necessary npm packages.
Navigate to project directory
cd angular-bootstrap4-sample
and then you can use the following command to run the project
ng serve
Installing Bootstrap 4
Now that we have created angular application, now it’s time to install bootstrap 4.
There are following ways to install bootstrap 4:
- Install bootstrap using the npm package
- Using Bootstrap CDN
- Downloading bootstrap files (Local css)
1. Install bootstrap using the npm package
Install bootstrap using the following command.
npm install --save bootstrap
The above command will create bootstrap folder under node_modules (node_modules/bootstrap) and which is containing all the assets files in it.
You’ll also need to install jquery.
npm install --save jquery
2. Using Bootstrap CDN
CSS
copy-paste the following stylesheet link
into your head
before all other stylesheets to load bootstrap css.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Javascript
Many of the bootstrap components require the use of javascript function and it requires jquery and popoverjs. place the following code just before the end of body
tag.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Now you index.html might looks similar to this
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
3. Downloading bootstrap files (Local css)
In this method, You’ll need to download bootstrap files from Bootstrap official website and you’ll need to place it into your project.
Here as shown in the below image, I’ve created styles folder and I’ve pasted bootstrap 4 files in it.

We’ve installed the bootstrap using different ways described as above, now it’s time to import the css.
Importing Bootstrap CSS in Angular Project
Now we’ll see how to import bootstrap css for the all ways the described above
1.Import css for bootstrap installed via npm
There are two ways to import css that’s installed via npm.
- Importing in
angular.json
- Importing in global
style.css
orstyle.scss
1.Importing in angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-bootstrap4-sample": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-bootstrap4-sample",
"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.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
},
"configurations": {
....
}
...
}
}
Here you might’ve noticed that we’ve added styles as well as scripts.
bootstrap.bundle.min.js
and jquery.min.js
is required for the component which uses javascript functions. i.e dropdown or modal dialog.
2.Importing in global style.css
or style.scss
In this method, you’ll need to import bootstrap css in src/style.css
as follows:
@import '~bootstrap/dist/css/bootstrap.min.css';
With this method, you’ll still need to include the scripts in angular.json as above method.
so angular.json will looks as follows:
{
....
"styles": [
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
...
}
2. Import css for bootstrap installed via CDN
You don’t have to do anything, you can start using bootstrap in you component.
3. Import css for bootstrap installed via local css
There are two ways to import css that’s installed via local css.
- Importing in
angular.json
- Importing in global
style.css
orstyle.scss
1.Importing in angular.json
If you’ve installed bootstrap via local css, you’ll need to import the css and script files in angular.json
same as 1st method but the path will change from node_modules
to styles
folder.
{
....
"styles": [
"src/styles/bootstrap-4.0.0-dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"src/styles/bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"
]
...
Here, we’ve installed bootstrap files in src/styles
folder. and we’ve imported it in angular.json
You might have noticed that we’ve also added a script for jquery
, which we’re taking from node_modules
folder. you can change it to use it from local project by downloading jquery files and adding it into the project(same as bootstrap).
2.Importing in global style.css
or style.scss
In this method, you’ll need to import bootstrap css in src/style.css
as follows:
@import './styles/bootstrap-4.0.0-dist/css/bootstrap.min.css';
That’s it. We’ve installed Bootstrap 4.
Now see the output for the following code.
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>@import './styles/bootstrap-4.0.0-dist/css/bootstrap.min.css';
Output

I hope you like this article.
Also Read:
- Angular ngFor Directive
- Angular Slice Pipe Example
- Custom Validators in Angular
- Getting Started With Angular Reactive Forms
- Angular Reactive Forms With Built In Validators Example
- Match Password Validation in Angular Reactive Forms
- How to use ngrx/store with Ionic 4
- Angular Material Grid Layout Example
- Best websites to learn angular
- Template Reference Variables(#var) in Angular
- How to get names and values of enum in typescript
- How to convert string to number in javascript or typescript