Bootstrap

Bootstrap installation guide

Bootstrap

Bootstrap can be added to your project in one of the following three ways:

ng-bootstrap (without jQuery)
vianpm (with jQuery)
CDN (with Popper & jQuery)

Prerequisites

Create an Angular project
Choose (CSS) stylesheet format
Navigate to root folder of project

After fulfilling the prerequisites mentioned above, Install bootstrap in the Angular project folder using one of the methods below

1. ng-bootstrap

Install ng-bootstrap from a terminal inside your angular project folder by the following command

ng add @ng–bootstrap/ng–bootstrap

No dependencies on third-party JavaScript or jQuery
The required options in angular.json are auto-filled

2. vianpm

jQuery

Install jQuery from a terminal inside your angular project folder by the following command

$npm install ––save jquery

If you want to install any particular version of Bootstrap

$npm install ––save jquery@version_number

Note Avoid using libraries that make direct manipulation of the DOM like jQuery. However, a few cases need jQuery for Angular development.

Bootstrap

Install Bootstrap from a terminal inside your angular project folder by the following command

$npm install bootstrap

If you want to install any particular version of Bootstrap

$npm install bootstrap@version_number

The jQuery and Bootstrap assets will be installed in node_modules. However, angular project needs to know where to look for them. Choose one of the two ways below to accomplish this

Using angular.json
(or) Using index.html

angular.json

projects. project_name. architect. build. options

Default

"styles": [
    "src/styles.css"
],
"scripts": [],

After Update

"styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.css",
    "src/styles.css"
],
"scripts": [
    "./node_modules/jquery/dist/jquery.js",
    "./node_modules/bootstrap/dist/js/bootstrap.js"
]

index.html

Default

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>FirstApp</title>
    <base href="/">
    <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>

</html>

After Update

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>FirstApp</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
</head>

<body>
    <app-root></app-root>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>

</html>

3. CDN: Content Delivery Network

CDN is a system of distributed servers, that deliver content to users. It can use the content from cache if it's already used beforehand.

You're not downloading bootstrap in this method, you'll need active internet connection
You're not hosting the bootstrap files with your design

1. CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

2. JQuery

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

3a. Popper, JavaScript

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

3b. JavaScript Bundle

Popper is included in this bundle, you only need to use either 3a or 3b

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>

integrity -- to secure file source
crossorigin -- provides options across Cross-Origin Resource Sharing (CORS)
- anonymous
- use-credentials

We need to insert in hierarchically topmost html file, here the corresponding file is src/index.html.

index.html

<!doctype html>
<html lang="en">

  <head>
    <!-- Meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- CSS -->
    <title>Hello, world!</title>
  </head>

  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery first -->
    <!-- then Popper.js -->
    <!-- then Bootstrap JS -->
  </body>
  
</html>