Web/ Design/ Vista

Resources for Designers & Developer

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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></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!