How to Add Bootstrap 4 to an Angular 6 App

Depending on your preference there are several methods to add bootstrap styling to Angular 6 app.

Method 1: This is the simplest way using CDN links for bootstrap core files and required Javascript.

Get bootstrap compiled assets: 

Copy the links to the main app file or index.html of your angular project as shown below

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>My Demo Angular App</title>
<base href="/">
<link rel="stylesheet" href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src=""></script>
<script src=""></script>
<script src=""></script>

Save and you are done! Remember that bootstrap 4 needs Popper JavaScript library to work. You have to add the link before bootstraps own JavaScript file.

Method 2: Install bootstrap, jquery and popper (required for bootstrap 4) using node packet manager (npm).

Run the following command 

npm install bootstrap jquery popper.js

Optionally you can also install font-awesome to go with bootstrap theme.

npm install font-awesome

Once installed, all these dependencies are available in node_modules folder of your application directory.

Next open angular.json file located in your application root. (previously it was angular-cli.json)

Find the “styles” and “scripts” tags and place the following code:

"styles": [
"scripts": [

Save and you are ready to use bootstrap on your angular project!