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:
https://getbootstrap.com/docs/4.0/getting-started/download/#bootstrapcdn.

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

<!doctype html>
<html lang="en">
<head>
<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">
</head>
<body>
<app-root></app-root>
</body>
<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>
</html>

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": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "../node_modules/font-awesome/css/font-awesome.css",
  "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/popper.js/dist/popper.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

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

Bootstrap Programming